Refetching and polling in GraphQL - Time & Space Complexity
Start learning this pattern below
Jump into concepts and practice - no test required
When using refetching and polling in GraphQL, we want to understand how the time it takes to get data changes as we ask for more updates.
We ask: How does the number of operations grow when we repeatedly fetch data?
Analyze the time complexity of the following GraphQL polling query.
query GetMessages {
messages {
id
content
timestamp
}
}
# Polling every 5 seconds to get new messages
This query fetches a list of messages repeatedly at fixed intervals to keep data fresh.
Look for repeated actions that affect time.
- Primary operation: Fetching the entire list of messages each poll.
- How many times: Once every polling interval (e.g., every 5 seconds).
As the number of messages grows, each poll fetches more data, so the work grows with the list size.
| Input Size (n messages) | Approx. Operations per Poll |
|---|---|
| 10 | 10 fetch operations |
| 100 | 100 fetch operations |
| 1000 | 1000 fetch operations |
Pattern observation: The work grows linearly as the number of messages increases.
Time Complexity: O(n)
This means the time to fetch data grows directly with the number of messages each time we poll.
[X] Wrong: "Polling only fetches new messages, so time stays the same no matter how many messages exist."
[OK] Correct: Polling as shown fetches the whole list every time, so more messages mean more work each poll.
Understanding how repeated data fetching scales helps you explain real-world app behavior and design efficient updates.
What if we changed polling to only fetch messages newer than the last one received? How would the time complexity change?
Practice
refetching in GraphQL?Solution
Step 1: Understand refetching concept
Refetching means running the same query again to get fresh data when needed.Step 2: Compare with polling
Polling updates data automatically, but refetching is manual and on demand.Final Answer:
To manually update data by running the query again -> Option AQuick Check:
Refetching = manual update [OK]
- Confusing refetching with automatic polling
- Thinking refetching caches data
- Assuming refetching deletes data
Solution
Step 1: Recall Apollo Client polling syntax
Polling is enabled by settingpollIntervalin milliseconds.Step 2: Check options for correctness
Only useQuery(MY_QUERY, { pollInterval: 5000 }) uses the correct propertypollIntervalwith 5000 ms (5 seconds).Final Answer:
useQuery(MY_QUERY, { pollInterval: 5000 }) -> Option CQuick Check:
pollInterval = 5000 ms [OK]
- Using wrong property names like refetchInterval
- Confusing seconds with milliseconds
- Assuming autoPoll is a valid option
const { data, loading, refetch } = useQuery(GET_USERS, { pollInterval: 10000 });
setTimeout(() => refetch(), 5000);What will happen regarding data updates?
Solution
Step 1: Understand polling behavior
Polling updates data automatically every 10 seconds as set bypollInterval.Step 2: Understand manual refetch
ThesetTimeoutcallsrefetch()once after 5 seconds, triggering an immediate update.Step 3: Combine effects
So data updates at 5 seconds manually, then continues updating every 10 seconds automatically.Final Answer:
Data updates at 5 seconds and then every 10 seconds -> Option BQuick Check:
Manual refetch + polling = updates at 5s and every 10s [OK]
- Ignoring manual refetch timing
- Assuming polling stops after manual refetch
- Confusing polling interval with refetch delay
const { data, loading } = useQuery(GET_POSTS, { pollInterval: 3000 });But data is not updating automatically. What is the likely cause?
Solution
Step 1: Understand polling requirements
Polling runs only when the component is mounted and active.Step 2: Check common issues
If data is not updating, the component might be unmounted or React Suspense is pausing it.Step 3: Eliminate other options
Polling does not need manual refetch, and 3000 ms is valid.Final Answer:
The component is unmounted or paused -> Option AQuick Check:
Polling requires active component [OK]
- Thinking polling needs manual refetch
- Assuming pollInterval too low stops polling
- Ignoring component lifecycle
Solution
Step 1: Understand polling and manual refresh
Polling updates data automatically every 15 seconds.Step 2: Add manual refresh
Adding a button that callsrefetch()lets users update data on demand.Step 3: Evaluate options
Use polling withpollInterval: 15000and add a button that callsrefetch()combines both correctly; others either disable manual refresh or misuse refetching.Final Answer:
Use polling with pollInterval: 15000 and add a button that calls refetch() -> Option DQuick Check:
Polling + manual refetch button = best combo [OK]
- Using only manual refetch without polling
- Disabling manual refresh when polling is active
- Replacing polling with setInterval refetch
