fix(react-query/HydrationBoundary): prevent unnecessary refetch during hydration #9968
+907
−3
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: d3bf064 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 rgba(230,240,255,0.5)
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 rgba(220,255,230,0.5)
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 rgba(255,250,220,0.5)
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 | ✅ 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
Comment |
github-actions
bot
added
documentation
|
View your CI Pipeline Execution ↗ for commit d3bf064
☁️ 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 46.05% 59.97% +13.92%
===========================================
Files 200 129 -71
Lines 8542 5769 -2773
Branches 1979 1591 -388
===========================================
- Hits 3934 3460 -474
+ Misses 4150 1994 -2156
+ Partials 458 315 -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
|
Thanks a lot for this. I hope it gets merged soon 🤞 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.