fix(react-query): retry useQuery().promise on error boundary reset #10079
Conversation
|
📝 WalkthroughWalkthroughTags thenables with a queryHash in QueryObserver, exposes PromiseWithHash, registers/tracks query hashes in QueryErrorResetBoundary to refetch registered errored queries via QueryClient on reset, adds getQueryHash/useTrackQueryHash helpers, registers queries in useBaseQuery for certain render modes, and adds tests for scoped registry and retry behavior. Changes
Sequence Diagram(s)sequenceDiagram
participant Component
participant Observer as QueryObserver
participant Server
participant QERB as QueryErrorResetBoundary
participant Client as QueryClient
Component->>Observer: read tagged promise (useQuery().promise)
Observer->>Server: fetch -> error
Observer-->>Component: throws (ErrorBoundary)
Component->>QERB: reset triggered (via ErrorBoundary.onReset)
QERB->>Client: refetchQueries(predicate matching registered hashes)
Client->>Observer: request refetch for matching queries
Observer->>Server: fetch -> success
Observer-->>Component: resolve tagged promise with data
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
|
View your CI Pipeline Execution ↗ for commit d4cd23a
☁️ Nx Cloud last updated this comment at |
![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
🤖 Fix all issues with AI agents
In `@packages/react-query/src/QueryErrorResetBoundary.tsx`:
- Around line 26-33: The predicate used in client?.refetchQueries incorrectly
treats observer.options.enabled functions as truthy; update the predicate to
resolve the enabled state using resolveEnabled from query-core (same approach as
in query.ts:270) so the check becomes something like resolving
observer.options.enabled against the query and comparing to !== false before
counting it as enabled; modify the predicate passed to refetchQueries where
query, observer, and observer.options.enabled are referenced and import/use
resolveEnabled to properly evaluate callback-based enabled options.
🧹 Nitpick comments (1)
packages/react-query/src/QueryErrorResetBoundary.tsx (1)
61-62: Consider potential stale closure with QueryClient.The
useStateinitializer captures theclientreference at mount time. While the QueryClient instance is typically stable throughout an app's lifecycle, if it were to change (e.g., during testing or in edge cases), thevalue.reset()would continue using the original client.This is likely acceptable given typical usage patterns, but worth noting for awareness.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #10079 +/- ##
==========================================
+ Coverage 36.87% 42.74% +5.87%
==========================================
Files 245 172 -73
Lines 11103 8267 -2836
Branches 2083 1687 -396
==========================================
- Hits 4094 3534 -560
+ Misses 6484 4343 -2141
+ Partials 525 390 -135 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@packages/react-query/src/__tests__/QueryResetErrorBoundary.test.tsx`:
- Around line 1063-1068: TrackedChild currently passes a raw string to
useTrackQueryHash (via queryClient.getQueryCache().build(...).queryHash), but
getQueryHash only registers objects; update TrackedChild to pass an object
instead (for example call useTrackQueryHash({ queryHash: hash }) or pass the
original query descriptor like useTrackQueryHash({ queryKey: key })) so the hook
registers the tracked query; change the call site in TrackedChild where
useTrackQueryHash(...) is invoked.
…t.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@packages/react-query/src/__tests__/QueryResetErrorBoundary.test.tsx`:
- Around line 1063-1072: There is a stray closing brace after the TrackedChild
component that breaks parsing; remove the extra `}` following the TrackedChild
function declaration so the component's braces match correctly (locate the
TrackedChild function that calls queryClient.getQueryCache().build(...) and
useTrackQueryHash and delete the superfluous closing brace to restore valid
syntax).
|
after reading your feedback, I had a new idea and reworked the approach. I've updated the logic to use a registry-based tracking system with queryHash-tagged promises. Could you please take another look ? |
2 participants
🎯 Changes
Fixes #9978
Recreate the query promise when a retry transitions the query to fetching, ensuring useQuery().promise provides a fresh pending promise to Suspense.
Explicitly refetch errored queries on QueryErrorResetBoundary reset, even when useQuery is outside the ErrorBoundary.
Limit refetching to active and enabled queries to avoid unintended retries.
✅ Checklist
pnpm run test:pr.🚀 Release Impact
Summary by CodeRabbit
New Features
Bug Fixes
Tests
✏️ Tip: You can customize this high-level summary in your review settings.