Prevent useQuery from skipping hydration#10159
Open
ColemanDunn wants to merge 3 commits intoTanStack:mainfrom
Open
Prevent useQuery from skipping hydration#10159ColemanDunn wants to merge 3 commits intoTanStack:mainfrom
ColemanDunn wants to merge 3 commits intoTanStack:mainfrom
Conversation
🦋 Changeset detectedLatest commit: 36edbba The changes in this PR will be included in the next version bump. This PR includes changesets to release 20 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
|
No actionable comments were generated in the recent review. 🎉 📝 WalkthroughWalkthroughHydration logic was changed so existing idle/pending queries (dataUpdatedAt === 0, status === "pending", fetchStatus === "idle") are treated like absent queries during hydration; a changeset bumps react-query and query-core as patch releases and tests added to verify no suspense-triggered refetch occurs. Changes
Sequence Diagram(s)sequenceDiagram
participant Server
participant HydrationBoundary
participant QueryClient
participant ClientComponent
Server->>QueryClient: prefetchQuery(key, data)
Server->>HydrationBoundary: provide dehydrated state
ClientComponent->>HydrationBoundary: render useQuery / useSuspenseQuery
HydrationBoundary->>QueryClient: check existingQuery state
alt existingQuery missing OR idle/pending (dataUpdatedAt==0, pending, idle)
HydrationBoundary->>QueryClient: hydrate dehydratedQuery -> replace/cache data
else existingQuery active/fetching
HydrationBoundary->>QueryClient: skip hydration for this key
end
ClientComponent->>QueryClient: read cached data (no suspense refetch)
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
🧪 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 |
ColemanDunn
force-pushed
the
prevent-usequery-from-blocking-hydration
branch
from
5fedd07 to
45eb471
Compare
|
View your CI Pipeline Execution ↗ for commit 36edbba
☁️ Nx Cloud last updated this comment at |
ColemanDunn
force-pushed
the
prevent-usequery-from-blocking-hydration
branch
from
24dbb40 to
133a6ca
Compare
ColemanDunn
force-pushed
the
prevent-usequery-from-blocking-hydration
branch
from
133a6ca to
de84710
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/react-query/src/HydrationBoundary.tsx (1)
76-79: Consider merging the twonewQueries.pushbranches.Both branches push to the same array. Combining them simplifies the control flow.
♻️ Optional simplification
- if (!existingQuery) { - newQueries.push(dehydratedQuery) - } else if (existingQueryIsIdleUseQuery) { + if (!existingQuery || existingQueryIsIdleUseQuery) { newQueries.push(dehydratedQuery) } else {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/react-query/src/HydrationBoundary.tsx` around lines 76 - 79, The two branches that both call newQueries.push(dehydratedQuery) can be merged: replace the separate if (!existingQuery) { newQueries.push(dehydratedQuery) } else if (existingQueryIsIdleUseQuery) { newQueries.push(dehydratedQuery) } with a single conditional that pushes when either condition is true (e.g., if (!existingQuery || existingQueryIsIdleUseQuery) newQueries.push(dehydratedQuery)); update the logic around existingQuery and existingQueryIsIdleUseQuery so no behavior changes occur beyond the simplification.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.changeset/moody-cities-stand.md:
- Line 6: Fix the typo "hyrdation" to "hydration" in the generated changelog
text by updating the string "prevent registered useQueries from skipping
hyrdation" to "prevent registered useQueries from skipping hydration" (search
for the exact misspelled token "hyrdation" in the changelog entry and replace
it).
---
Nitpick comments:
In `@packages/react-query/src/HydrationBoundary.tsx`:
- Around line 76-79: The two branches that both call
newQueries.push(dehydratedQuery) can be merged: replace the separate if
(!existingQuery) { newQueries.push(dehydratedQuery) } else if
(existingQueryIsIdleUseQuery) { newQueries.push(dehydratedQuery) } with a single
conditional that pushes when either condition is true (e.g., if (!existingQuery
|| existingQueryIsIdleUseQuery) newQueries.push(dehydratedQuery)); update the
logic around existingQuery and existingQueryIsIdleUseQuery so no behavior
changes occur beyond the simplification.
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/query-core/src/hydration.ts (1)
220-224:existingQueryIsUndefinedOrIsIdleUseQuery— naming couples implementation to a specific callerThe three-condition guard (
dataUpdatedAt === 0 && status === 'pending' && fetchStatus === 'idle') characterises a structural query state (never-fetched and idle), not the type of observer that created the entry. TheUseQuerysuffix implies caller-origin knowledge that isn't actually verified here. A name likeexistingQueryIsUndefinedOrNeverFetchedIdleorqueryIsAbsentOrIdlePendingwould be less misleading to future readers.♻️ Suggested rename
- const existingQueryIsUndefinedOrIsIdleUseQuery = + const existingQueryIsAbsentOrNeverFetchedIdle = !query || (query.state.dataUpdatedAt === 0 && query.state.status === 'pending' && query.state.fetchStatus === 'idle')And update the usage at line 270:
- (existingQueryIsUndefinedOrIsIdleUseQuery || + (existingQueryIsAbsentOrNeverFetchedIdle || (!existingQueryIsPending && !existingQueryIsFetching)) &&🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/query-core/src/hydration.ts` around lines 220 - 224, Rename the misleading variable existingQueryIsUndefinedOrIsIdleUseQuery to a name that reflects the structural state check (for example existingQueryIsUndefinedOrNeverFetchedIdle or queryIsAbsentOrIdlePending) and update all references (including the use at the site that currently reads the old name) so the code checks the same three-condition guard (query is falsy OR query.state.dataUpdatedAt === 0 && query.state.status === 'pending' && query.state.fetchStatus === 'idle') but without implying a specific caller like UseQuery; update both the variable declaration and every place it is referenced (e.g., the expression currently using existingQueryIsUndefinedOrIsIdleUseQuery).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/query-core/src/hydration.ts`:
- Around line 220-224: Rename the misleading variable
existingQueryIsUndefinedOrIsIdleUseQuery to a name that reflects the structural
state check (for example existingQueryIsUndefinedOrNeverFetchedIdle or
queryIsAbsentOrIdlePending) and update all references (including the use at the
site that currently reads the old name) so the code checks the same
three-condition guard (query is falsy OR query.state.dataUpdatedAt === 0 &&
query.state.status === 'pending' && query.state.fetchStatus === 'idle') but
without implying a specific caller like UseQuery; update both the variable
declaration and every place it is referenced (e.g., the expression currently
using existingQueryIsUndefinedOrIsIdleUseQuery).
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
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 #10145
Hydration is being skipped for useQueries that add to the cache above a
HydrationBoundarybut will actually not run or hydrate the queryClient.✅ Checklist
pnpm run test:pr.🚀 Release Impact
Summary by CodeRabbit
Bug Fixes
New Features
Tests
Chores