Refetching and polling in GraphQL

Introduction

Refetching and polling help keep your data fresh by asking the server for updates regularly or on demand.

You want to update a list of messages in a chat app automatically.

You need to refresh stock prices every few seconds.

You want to reload user profile data after a user makes changes.

You want to keep a dashboard showing live data up to date.

Syntax

GraphQL

query YourQueryName {
  yourData {
    field1
    field2
  }
}

// Refetching: Call the query again manually when needed.

// Polling example (in Apollo Client):
useQuery(YOUR_QUERY, { pollInterval: 5000 })

Refetching means running the query again to get fresh data.

Polling means running the query automatically at set time intervals.

Examples

This is a simple query to get user IDs and names.

GraphQL

query GetUsers {
  users {
    id
    name
  }
}

You can call refetch() to manually update the data.

GraphQL

// Refetch example in Apollo Client
const { data, refetch } = useQuery(GET_USERS);

// Call refetch() when you want fresh data

This query runs every 10 seconds to get updated user data automatically.

GraphQL

// Polling example in Apollo Client
const { data } = useQuery(GET_USERS, { pollInterval: 10000 });

Sample Program

This query fetches messages and automatically updates every 3 seconds.

GraphQL

query GetMessages {
  messages {
    id
    text
    sender
  }
}

// In Apollo Client React hook:
const { data, loading, error } = useQuery(GET_MESSAGES, { pollInterval: 3000 });

Important Notes

Polling can increase server load; use it only when needed.

Refetching is good for manual updates, like after a user action.

Always handle loading and error states when fetching data.

Summary

Refetching updates data on demand by running the query again.

Polling updates data automatically at regular intervals.

Use these to keep your app's data fresh and responsive.

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