Refetching and polling in GraphQL - Step-by-Step Execution

Concept Flow - Refetching and polling

Start Query

↓

Fetch Data from Server

↓

Display Data

↓

Refetch Triggered?

No→Wait

↓

Fetch Data Again

↓

Update Display

Back to Wait↓

Polling Enabled?

No→Wait

Yes↓

Wait Poll Interval

↓

Fetch Data Again

↓

Update Display

↩Back to Wait

The flow starts with fetching data, then displays it. It waits for either a refetch trigger or polling interval to fetch and update data again.

Execution Sample

GraphQL

query GetUsers {
  users {
    id
    name
  }
}

// Poll every 5 seconds
useQuery(GetUsers, { pollInterval: 5000 })

This GraphQL query fetches user IDs and names, and polls the server every 5 seconds to update the data.

Execution Table

Step	Action	Data Fetched	Display Updated	Next Wait
1	Initial fetch	[{id:1, name:'Alice'}, {id:2, name:'Bob'}]	Yes	Wait for refetch or poll
2	Poll interval reached	[{id:1, name:'Alice'}, {id:2, name:'Bob'}]	Yes	Wait for refetch or poll
3	Refetch triggered manually	[{id:1, name:'Alice'}, {id:2, name:'Bob'}, {id:3, name:'Carol'}]	Yes	Wait for refetch or poll
4	Poll interval reached	[{id:1, name:'Alice'}, {id:2, name:'Bob'}, {id:3, name:'Carol'}]	Yes	Wait for refetch or poll
5	No refetch or poll triggered	No new data	No	Wait continues

💡 Execution continues indefinitely until stopped; polling and refetch keep updating data.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5
data	[]	[{id:1, name:'Alice'}, {id:2, name:'Bob'}]	[{id:1, name:'Alice'}, {id:2, name:'Bob'}]	[{id:1, name:'Alice'}, {id:2, name:'Bob'}, {id:3, name:'Carol'}]	[{id:1, name:'Alice'}, {id:2, name:'Bob'}, {id:3, name:'Carol'}]	[{id:1, name:'Alice'}, {id:2, name:'Bob'}, {id:3, name:'Carol'}]
displayUpdated	No	Yes	Yes	Yes	Yes	No

Key Moments - 3 Insights

Why does the data update even if I don't manually refetch?

Because polling automatically fetches data at set intervals (see Step 2 and Step 4 in execution_table), updating the display without manual action.

What happens if no new data is available during polling?

The display does not update (Step 5), but polling continues waiting for the next interval to check again.

Can refetch and polling happen at the same time?

Yes, refetch can be triggered manually anytime, and polling runs independently on intervals (see Step 3 and Step 4). Both update data when they fetch.

Visual Quiz - 3 Questions

Look at the execution_table, what data is displayed after Step 3?

A [{id:1, name:'Alice'}, {id:2, name:'Bob'}]

B No data

C [{id:1, name:'Alice'}, {id:2, name:'Bob'}, {id:3, name:'Carol'}]

D [{id:3, name:'Carol'}]

💡 Hint

Check the 'Data Fetched' column at Step 3 in execution_table.

At which step does polling cause data to be fetched again?

A Step 3

B Step 2

C Step 1

D Step 5

💡 Hint

Look for 'Poll interval reached' in the Action column of execution_table.

If the pollInterval is set to 0, what changes in the execution_table?

A Polling steps disappear; only manual refetch updates data

B Polling happens more frequently

C Data never updates

D Initial fetch is skipped

💡 Hint

Consider how pollInterval controls automatic fetching in the concept_flow.

Concept Snapshot

Refetching and polling in GraphQL:
- Initial query fetches data once.
- Refetch manually triggers a new fetch anytime.
- Polling automatically fetches data at set intervals.
- Both update the displayed data when new data arrives.
- Polling continues until stopped or interval set to 0.

Full Transcript

This visual execution shows how GraphQL queries fetch data initially, then update it either by manual refetch or automatic polling. The flow diagram illustrates starting with a query, displaying data, then waiting for triggers to fetch again. The execution table traces each fetch step, showing data changes and display updates. Variable tracking follows the data and display update states. Key moments clarify common confusions about automatic updates and manual triggers. The quiz tests understanding of when and how data updates happen. The snapshot summarizes the core ideas of refetching and polling in GraphQL.

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