Refetching and polling in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the result of polling with a 5-second interval?

Consider a GraphQL query that fetches the current server time. The client sets up polling with a 5-second interval. What will the client receive?

GraphQL

query GetServerTime {
  serverTime
}

// Client polls every 5 seconds

A The client receives server time updates randomly, not every 5 seconds.

B The client receives the same server time repeatedly without updates.

C The client receives server time only once at the start.

D The client receives updated server time every 5 seconds.

💡 Hint

Polling means the client asks the server repeatedly at fixed intervals.

Polling with a 5-second interval means the client sends the query every 5 seconds and receives the latest server time each time.

🧠 Conceptual

intermediate

Why use refetching instead of polling in GraphQL?

Which reason best explains why a developer might choose to use refetching over polling?

A Refetching allows manual control to update data only when needed, saving resources.

B Refetching sends queries continuously at fixed intervals.

C Refetching caches data permanently and never updates it.

D Refetching automatically updates data without any user action.

💡 Hint

Think about when you want to update data only sometimes, not all the time.

Refetching is a manual or event-triggered way to update data, which helps avoid unnecessary network requests compared to polling.

📝 Syntax

advanced

Which polling setup syntax is correct in Apollo Client?

Choose the correct way to set up polling every 10 seconds in Apollo Client.

GraphQL

const { data, loading, error } = useQuery(GET_DATA, {
  // polling setup here
});

A pollingInterval: 10000

B pollInterval = 10000

C pollInterval: 10000

D pollInterval: '10000'

💡 Hint

Check the exact property name and value type for polling interval.

The correct property is pollInterval with a number value in milliseconds.

🔧 Debug

advanced

Why does refetching not update data immediately?

A developer calls refetch() on a query, but the UI does not update with new data. What is the most likely cause?

A The <code>refetch()</code> method is asynchronous and must be awaited.

B The query is missing a <code>fetchPolicy</code> that allows network requests.

C The server does not support refetching queries.

D The query is cached and cannot be updated.

💡 Hint

Think about how Apollo Client decides where to get data from.

If the fetch policy is set to only use cache, refetching won't trigger a network request to get fresh data.

❓ optimization

expert

How to optimize polling to reduce server load?

You have a GraphQL query polling every 2 seconds, but the server load is too high. Which approach best reduces load while keeping data fresh?

A Increase polling interval to 30 seconds and use refetch on user actions.

B Keep polling every 2 seconds but disable caching completely.

C Use polling every 2 seconds but add a delay in the server response.

D Remove polling and rely only on initial query load.

💡 Hint

Think about balancing update frequency and server requests.

Increasing the polling interval reduces requests, and refetching on user actions keeps data fresh when needed.

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