docs(react-query): add react background retry pausing documentation for v5#9755
Conversation
|
WalkthroughAdded a "Background Retry Behavior" docs subsection clarifying that built-in retry/refetch pauses when a tab is inactive even with Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/framework/react/guides/background-retry-pausing.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/framework/react/guides/background-retry-pausing.md
[grammar] ~12-~12: There might be a mistake here.
Context: ...ts, including: - Initial query failures - Refetch interval failures - Manual refet...
(QB_NEW_EN)
[grammar] ~13-~13: There might be a mistake here.
Context: ...ery failures - Refetch interval failures - Manual refetch failures [//]: # 'Exampl...
(QB_NEW_EN)
| ```tsx | ||
| const { data } = useQuery({ | ||
| queryKey: ['non-critical-data'], | ||
| queryFn: fetchData, | ||
| refetchInterval: 30000, | ||
| refetchIntervalInBackground: true, | ||
| retry: (failureCount, error) => { | ||
| // Only retry when tab is focused | ||
| return focusManager.isFocused() ? failureCount < 3 : false | ||
| }, | ||
| }) |
There was a problem hiding this comment.
Import missing in snippet
This snippet calls focusManager.isFocused() but does not show an import. For copy-paste correctness, add import { focusManager } from '@tanstack/react-query' (or include it in the preceding code fence).
🤖 Prompt for AI Agents
In docs/framework/react/guides/background-retry-pausing.md around lines 115 to
125, the snippet uses focusManager.isFocused() but does not show its import; add
an import line for focusManager from '@tanstack/react-query' at the top of the
code example (or include it in the preceding code fence) so the snippet is
copy-paste ready.
TkDodo
left a comment
There was a problem hiding this comment.
can you add this to the query retry guide please:
https://tanstack.com/query/v5/docs/framework/react/guides/query-retries
also maybe trim it down a bit because I don’t think it’s such an important / relevant situation that we need to dedicate a full guide to it.
at the end of the day, if you have refetchInterval and refetchIntervalInBackground turned on, you can just turn off retries and maybe implement a custom refetchInterval function that refetches more often when the query is in error state to kinda imitate what retries do...
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/framework/react/guides/query-retries.md(1 hunks)
🔇 Additional comments (2)
docs/framework/react/guides/query-retries.md (2)
82-84: Verify the retry-pausing behavior claim and its interaction withrefetchIntervalInBackground.The section asserts that "retries will pause when the browser tab is inactive" when using
refetchIntervalInBackground: true. This is a critical claim for users to rely on. The explanation also states that "retries respect the same focus-based behavior as regular refetches," but this distinction between retries and refetches as separate mechanisms could be clearer upfront.Please verify:
- That retries indeed pause during tab inactivity when
refetchIntervalInBackground: trueis set- The distinction between built-in retry behavior and
refetchIntervalrefetch behavior in the context of background tab inactivity- Whether this is the intended behavior or a side-effect that's being documented as a known limitation
Since this change relates to issue #9563, confirming the behavior against that issue would help validate this claim.
84-105: Documentation structure and clarity are solid.The section logically flows from problem identification → explanation of root cause → proposed solution → practical code example. The use of consistent documentation markers (
[//]: # 'Example4') aligns with the existing file style. The code example demonstrates a pragmatic workaround (disabling retries and using customrefetchIntervallogic) that gives users more explicit control.
01fa7bc to
305be88
Compare
|
@TkDodo Thanks for the feedback! I've updated the documentation as suggested. |
37f5942 to
ed87922
Compare
ed87922 to
117be09
Compare
🎯 Changes
Related to #9563
Added react-query documentation on how query retries are paused in background tabs, explaining why this overrides refetchIntervalInBackground
Would love to hear your thoughts on this direction.
✅ Checklist
pnpm run test:pr.🚀 Release Impact
Summary by CodeRabbit