Conversation
Adds a dedicated guide for refetchInterval-based polling. The option was only mentioned in passing in important-defaults.md with no explanation of how it works, how to adapt it dynamically, or how it interacts with window focus, networkMode, and the enabled flag. Covers: - Basic setup and independence from staleTime - Dynamic intervals via function form - refetchIntervalInBackground for dashboards / always-on UIs - Disabling window-focus refetching for fullscreen game and kiosk UIs - Pausing polling with the enabled flag - networkMode: 'always' for unreliable navigator.onLine environments - Deduplication behavior across multiple observers Updates config.json to add the guide to the React sidebar between Window Focus Refetching and Disabling/Pausing Queries. Adds a cross-reference in important-defaults.md.
github-actions
bot
added
the
documentation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughAdded a new React polling guide and updated navigation and a cross-reference: introduces documentation for Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~4 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/framework/react/guides/polling.md`:
- Around line 143-145: The current note incorrectly says there is "one interval
per query"; update the text to state that refetchInterval timers are scheduled
per QueryObserver (each component creates its own timer when using
refetchInterval) and that only in-flight fetches are deduplicated at the
cache/query level (i.e., duplicate network requests started at the same time are
consolidated), referencing refetchInterval and QueryObserver to make the
distinction clear. Ensure the revised wording contrasts observer-level timers
vs. cache-level in-flight deduplication so readers understand multiple
components will each have timers but won't cause duplicate concurrent network
fetches.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 0647e542-9e75-4aca-b819-6f02d0d47b12
📒 Files selected for processing (3)
docs/config.jsondocs/framework/react/guides/important-defaults.mddocs/framework/react/guides/polling.md
TkDodo
left a comment
TkDodo
left a comment
There was a problem hiding this comment.
thank you. I’m generally for adding this page, but left some feedback 🙏
|
|
||
| [//]: # 'Example1' | ||
|
|
||
| Polling is independent of `staleTime`. A query can be fresh and still poll on schedule — `staleTime` controls when background refetches triggered by *mounting* or *window focus* happen. `refetchInterval` fires on its own clock regardless. |
There was a problem hiding this comment.
i wouldn’t mention mounting or window focus explicitly here. The list is not exhaustive and it might change over time, so I’d rather we link this to the important-defaults.md file where the triggers are explained.
|
|
||
| ## Polling with offline support | ||
|
|
||
| By default, queries skip fetches when the browser reports no network connection. If your app runs in environments where `navigator.onLine` is unreliable — embedded browsers, Electron, some WebViews — set `networkMode: 'always'` to ignore the online check: |
There was a problem hiding this comment.
we don’t use navigator.onLine anymore to determine network status. We only subscribe to online / offline browser events.
|
|
||
| ## Note on deduplication | ||
|
|
||
| Each `QueryObserver` — each component using `useQuery` with `refetchInterval` — runs its own timer. Two components subscribed to the same key with `refetchInterval: 5000` each fire their timer every 5 seconds. What's deduplicated is concurrent in-flight fetches: if two timers fire at overlapping moments, React Query won't issue two parallel network requests for the same key. The second fetch is held until the first settles. In practice, two components on the same polling interval produce one request per cycle, but the timers are observer-level, not query-level. |
There was a problem hiding this comment.
The second fetch is held until the first settles
this reads as if we queue requests up and the second one fires after the first one, which isn’t true. I’d just remove this sentence, it doesn’t add anything valuable imo.
|
|
||
| ## Pausing polling | ||
|
|
||
| Set `enabled: false` to stop polling when conditions aren't met. Any running interval is cleared immediately, and it restarts when `enabled` becomes `true` again: |
There was a problem hiding this comment.
hmm, setting enabled: false doesn’t only stop polling. To stop polling, I’d return false from the refetchInterval function. You can close over state values like tokenAddress. The refetchInterval function will re-run when the component re-renders or when data changes, and it will resume polling if you stop returning false from it.
|
|
||
| [//]: # 'Example3' | ||
|
|
||
| ## Disabling window-focus refetching in non-browser UIs |
There was a problem hiding this comment.
I don’t think example 4 and 5 should be here. We explain those concepts in the react-native docs page, which is the most common non-browser UI being used. It shows how to set up custom focus manager listeners. turning off window focus refetching and replacing it with a 60s interval is also not advice I would give.
If anything, please move this section to the end, keep it short and link to the react-native docs.
- Remove staleTime enumeration; link to Important Defaults instead - Remove game/kiosk focus management examples (scope creep) - Rewrite pausing polling to use refetchInterval function instead of enabled: false - Fix offline support section: connectivity uses online/offline events, not navigator.onLine - Fix deduplication note: remove queuing implication and em dash - Add non-browser environments note pointing to React Native guide
|
View your CI Pipeline Execution ↗ for commit 0fc4ddf
☁️ Nx Cloud last updated this comment at |
Zelys-DFKH
left a comment
Zelys-DFKH
left a comment
There was a problem hiding this comment.
Addressed all five points:
- Replaced the
staleTimeenumeration with a link to Important Defaults - Removed the game/kiosk focus management examples entirely
- Rewrote "Pausing polling" to use
refetchIntervalreturningfalseinstead ofenabled: false - Fixed the offline section to describe
online/offlineevents rather thannavigator.onLine - Cleaned up the deduplication note and added a short non-browser environments pointer at the end
2 participants
Summary
docs/framework/react/guides/polling.md— a dedicated guide forrefetchInterval-based pollingdocs/config.jsonbetween Window Focus Refetching and Disabling/Pausing Queriesimportant-defaults.mdMotivation
refetchIntervalis one of the more commonly reached-for options but is only mentioned once in passing in important-defaults.md. There's no explanation of how it interacts withstaleTime,refetchIntervalInBackground,enabled, ornetworkMode. The gap comes up repeatedly in Discord and on StackOverflow.What the guide covers
staleTimerefetchIntervalInBackgroundfor dashboards and always-on UIsfocusManager.setEventListenerexampleenablednetworkMode: 'always'for Electron / embedded browsers wherenavigator.onLineis unreliableChecklist
Summary by CodeRabbit