fix(react-query): retry useQuery().promise on error boundary reset #10079
Conversation
|
📝 WalkthroughWalkthroughThis PR adjusts thenable lifecycle in QueryObserver to recreate the pending thenable when a rejected result transitions to a fetch-in-progress, and extends QueryErrorResetBoundary to accept/use a QueryClient to trigger refetches on reset. A new test verifies retry behavior for useQuery().promise with QERB. Changes
Sequence Diagram(s)sequenceDiagram
participant Component
participant ErrorBoundary
participant QERB as QueryErrorResetBoundary
participant Client as QueryClient
participant Observer as QueryObserver
participant Server
Component->>Observer: subscribe / read promise (useQuery().promise)
Observer->>Server: fetch -> returns error
Observer-->>Component: throws (suspense/error)
Component->>ErrorBoundary: shows error UI
ErrorBoundary->>QERB: resetErrorBoundary() / onReset
QERB->>Client: refetchQueries(predicate)
Client->>Observer: trigger refetch
Observer->>Server: fetch -> returns data
Observer-->>Component: resolves promise with data
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 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
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 00af302
☁️ Nx Cloud last updated this comment at |
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:
|
🎯 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.