Why Refetching and polling in GraphQL? - Purpose & Use Cases

The Big Idea

What if your app could update itself like magic, without you doing anything?

The Scenario

Imagine you have a webpage showing live sports scores. Without automatic updates, you have to refresh the whole page manually every few seconds to see the latest scores.

The Problem

Manually refreshing is slow and annoying. You might miss important updates between refreshes, and constantly reloading wastes data and makes the page flicker.

The Solution

Refetching and polling let your app automatically ask the server for fresh data at set intervals. This keeps your page updated smoothly without you lifting a finger.

Before vs After

✗ Before

window.setInterval(() => window.location.reload(), 5000);

✓ After

useQuery(GET_SCORES, { pollInterval: 5000 });

What It Enables

This makes your app feel alive and responsive, always showing the latest info without annoying reloads.

Real Life Example

News apps use polling to update headlines every minute, so you see breaking news instantly without refreshing.

Key Takeaways

Manual refresh is slow and frustrating.

Refetching and polling automate data updates.

Your app stays fresh and user-friendly effortlessly.

Practice

1. What is the main purpose of refetching in GraphQL?

easy

A. To manually update data by running the query again

B. To automatically update data at regular intervals

C. To cache data locally for faster access

D. To delete outdated data from the server

Solution

1. Step 1: Understand refetching concept

   Refetching means running the same query again to get fresh data when needed.

2. Step 2: Compare with polling

   Polling updates data automatically, but refetching is manual and on demand.

3. Final Answer:

   To manually update data by running the query again -> Option A

4. Quick Check:

   Refetching = manual update [OK]

Hint: Refetching means manual data update by rerunning query [OK]

Common Mistakes:

• Confusing refetching with automatic polling
• Thinking refetching caches data
• Assuming refetching deletes data

2. Which of the following is the correct way to enable polling every 5 seconds in a GraphQL query using Apollo Client?

easy

A. useQuery(MY_QUERY, { refetchInterval: 5000 })

B. useQuery(MY_QUERY, { refreshRate: 5 })

C. useQuery(MY_QUERY, { pollInterval: 5000 })

D. useQuery(MY_QUERY, { autoPoll: true, interval: 5000 })

Solution

1. Step 1: Recall Apollo Client polling syntax

   Polling is enabled by setting pollInterval in milliseconds.

2. Step 2: Check options for correctness

   Only useQuery(MY_QUERY, { pollInterval: 5000 }) uses the correct property pollInterval with 5000 ms (5 seconds).

3. Final Answer:

   useQuery(MY_QUERY, { pollInterval: 5000 }) -> Option C

4. Quick Check:

   pollInterval = 5000 ms [OK]

Hint: pollInterval sets polling time in ms in Apollo Client [OK]

Common Mistakes:

• Using wrong property names like refetchInterval
• Confusing seconds with milliseconds
• Assuming autoPoll is a valid option

3. Given this code snippet using Apollo Client:

const { data, loading, refetch } = useQuery(GET_USERS, { pollInterval: 10000 });
setTimeout(() => refetch(), 5000);

What will happen regarding data updates?

medium

A. Data updates every 10 seconds only

B. Data updates at 5 seconds and then every 10 seconds

C. Data updates every 5 seconds only

D. Data updates only once at 5 seconds

Solution

1. Step 1: Understand polling behavior

   Polling updates data automatically every 10 seconds as set by pollInterval.

2. Step 2: Understand manual refetch

   The setTimeout calls refetch() once after 5 seconds, triggering an immediate update.

3. Step 3: Combine effects

   So data updates at 5 seconds manually, then continues updating every 10 seconds automatically.

4. Final Answer:

   Data updates at 5 seconds and then every 10 seconds -> Option B

5. Quick Check:

   Manual refetch + polling = updates at 5s and every 10s [OK]

Hint: Manual refetch triggers immediate update, polling continues regularly [OK]

Common Mistakes:

• Ignoring manual refetch timing
• Assuming polling stops after manual refetch
• Confusing polling interval with refetch delay

4. You wrote this code to poll data every 3 seconds:

const { data, loading } = useQuery(GET_POSTS, { pollInterval: 3000 });

But data is not updating automatically. What is the likely cause?

medium

A. The component is unmounted or paused

B. The pollInterval value is too low

C. The query is missing a refetch call

D. Polling requires manual trigger each time

Solution

1. Step 1: Understand polling requirements

   Polling runs only when the component is mounted and active.

2. Step 2: Check common issues

   If data is not updating, the component might be unmounted or React Suspense is pausing it.

3. Step 3: Eliminate other options

   Polling does not need manual refetch, and 3000 ms is valid.

4. Final Answer:

   The component is unmounted or paused -> Option A

5. Quick Check:

   Polling requires active component [OK]

Hint: Polling only works if component is mounted and active [OK]

Common Mistakes:

• Thinking polling needs manual refetch
• Assuming pollInterval too low stops polling
• Ignoring component lifecycle

5. You want to keep a chat app's messages updated. You use polling every 15 seconds but also want users to refresh manually. Which approach best combines refetching and polling?

hard

A. Use polling with pollInterval: 15000 and disable manual refresh

B. Use only refetching triggered by a button every 15 seconds

C. Use refetching inside a setInterval instead of polling

D. Use polling with pollInterval: 15000 and add a button that calls refetch()

Solution

1. Step 1: Understand polling and manual refresh

   Polling updates data automatically every 15 seconds.

2. Step 2: Add manual refresh

   Adding a button that calls refetch() lets users update data on demand.

3. Step 3: Evaluate options

   Use polling with pollInterval: 15000 and add a button that calls refetch() combines both correctly; others either disable manual refresh or misuse refetching.

4. Final Answer:

   Use polling with pollInterval: 15000 and add a button that calls refetch() -> Option D

5. Quick Check:

   Polling + manual refetch button = best combo [OK]

Hint: Combine pollInterval with refetch button for best updates [OK]

Common Mistakes:

• Using only manual refetch without polling
• Disabling manual refresh when polling is active
• Replacing polling with setInterval refetch