fix(react-query/HydrationBoundary): prevent unnecessary refetch during hydration #9968
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 653df2c The changes in this PR will be included in the next version bump. This PR includes changesets to release 19 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
📝 WalkthroughWalkthroughAdds hydration-aware tracking to prevent double-fetch during HydrationBoundary hydration: introduces a WeakSet to mark pending queries, updates QueryObserver to skip fetches for pending queries (unless forced), updates HydrationBoundary to mark/clear pending queries, adds docs, tests, and a changeset. Changes
Sequence Diagram(s)sequenceDiagram
participant App as App / Router
participant HB as HydrationBoundary
participant QC as QueryClient / Cache
participant QO as QueryObserver
participant Net as Network
rect rgb(230,240,255)
Note over App,HB: Render phase (sync)
App->>HB: Render with dehydrated state
HB->>QC: Hydrate cache (useMemo)
HB->>QC: For each hydrated query: add to pendingHydrationQueries
Note over HB,QC: Queries flagged as pending
end
rect rgb(220,255,230)
Note over QO,Net: Subscription / mount
QO->>QO: onSubscribe runs
QO->>QC: Check pendingHydrationQueries for query
alt pending and refetchOnMount != 'always'
QO->>QO: Skip initial fetch (avoid double-fetch)
else not pending or refetchOnMount == 'always'
QO->>Net: Fetch data
end
end
rect rgb(255,250,220)
Note over HB: Effect phase (async)
HB->>HB: useEffect runs after paint
HB->>QC: Complete hydration
HB->>QC: clear pendingHydrationQueries for hydrated queries
Note over HB,QC: Cleanup ensures no stale pending flags
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
Comment |
github-actions
bot
added
documentation
|
View your CI Pipeline Execution ↗ for commit 653df2c
☁️ Nx Cloud last updated this comment at |
sukvvon
force-pushed
the
fix/hydration-boundary-double-fetch
branch
from
86745a3 to
8626d42
Compare
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #9968 +/- ##
===========================================
+ Coverage 45.82% 59.73% +13.90%
===========================================
Files 200 129 -71
Lines 8525 5760 -2765
Branches 1977 1596 -381
===========================================
- Hits 3907 3441 -466
+ Misses 4158 2002 -2156
+ Partials 460 317 -143 🚀 New features to boost your workflow:
|
sukvvon
force-pushed
the
fix/hydration-boundary-double-fetch
branch
from
cfa5d74 to
695fa28
Compare
…tract 'clearPendingQueries' function
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🎯 Changes
Fixes #9610
When using
HydrationBoundarywith existing queries in the cache, an unnecessary refetch was triggered during hydration even though fresh data was about to be hydrated from the server.Root Cause
useQuery'sonSubscriberuns beforeHydrationBoundary'suseEffectcompletes hydrationSolution
pendingHydrationQueriesWeakSet to track queries pending hydrationuseMemo(before children render)queryObserver.onSubscribeif query is pending hydrationrefetchOnMount: 'always'still triggers refetch (user explicitly wants fresh data)useEffectafter hydration completesFiles Changed
packages/query-core/src/hydration.ts- ExportpendingHydrationQueriesWeakSetpackages/query-core/src/index.ts- Re-exportpendingHydrationQueriespackages/query-core/src/queryObserver.ts- Check pending hydration inonSubscribepackages/react-query/src/HydrationBoundary.tsx- Mark/clear pending hydration queries with cleanuppackages/react-query/src/__tests__/HydrationBoundary.test.tsx- Add 14 test casesdocs/framework/react/guides/ssr.md- Document new behaviordocs/framework/react/reference/hydration.md- Document new behavior✅ Checklist
pnpm run test:pr.🚀 Release Impact
Summary by CodeRabbit
Bug Fixes
Documentation
Tests
✏️ Tip: You can customize this high-level summary in your review settings.