Skip to content

Fix misc hydration bugs #9157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix misc hydration bugs #9157

wants to merge 3 commits into from

Conversation

Ephem
Copy link
Collaborator

@Ephem Ephem commented May 16, 2025 •
edited
Loading

This PR:

  • Fixes Maximum update depth exceeded #8677 - A bug where hydrating failed queries (and possibly other conditions) could result in an infinite loop
  • Fixes an undocumented bug where an old promise could overwrite newer data
  • Fixes an undocumented bug where if a promise finished fast and was delivered as a synchronous thenable before React markup hydration, React Query would not hydrate it synchronously.
    • The effect would be that a page would show its full content, but revert to the Suspense state on hydration because the data was not available in the React Query cache, only to immediately show the full content again.
    • This behaviour also seem to have slowed down the initial load of pages with very fast APIs somewhat, so should be snappier now.
  • Implements tests for these bugs

At the point of hydrating a promise, we don't know when the promise will finish, that is, we don't know the dataUpdatedAt of the hydrated query, so we can't compare that to the existing query. The PR sidesteps this by introducing dehydratedAt as an approximation. This is not perfect, but is an improvement.

To fix the infinite loop bug I also opted to never hydrate promises if the existing query is already pending, as there is no way to know which of these pending queries will finish first or have the newest data. We could do fancier things like a Promise.race and use whatever finishes first, but that seemed like overengineering at this point.

@Ephem
test(hydration): implement missing hydration tests
660ab07 
* Do not hydrate older promises
* Do not infinite loop on hydrating failed promises
* Hydrate already resolved promises immediately
@Ephem Ephem requested review from TkDodo and juliusmarminge May 16, 2025 15:12
@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented May 16, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit 1568117.

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 1m 4s View ↗

☁️ Nx Cloud last updated this comment at 2025-05-16 17:17:15 UTC

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented May 16, 2025 •
edited
Loading

More templates

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@9157

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9157

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9157

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9157

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9157

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9157

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9157

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9157

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9157

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@9157

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9157

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9157

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9157

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9157

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9157

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9157

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9157

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9157

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9157

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9157

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9157

commit: 1568117

@Ephem Ephem marked this pull request as draft May 16, 2025 15:26
@Ephem
fix(hydration): fix promise hydration bugs
13c3232 
* Include dehydratedAt and ignore hydrating old promises
  * This is an approximation of dataUpdatedAt, but is not perfect
* Refactor checks for if we should hydrate promises or not to fix infinite loop bug on failed queries
* Hydrate already resolved promises synchronously
@Ephem Ephem force-pushed the fredrik/fix-hydration-bugs branch from 27d8d67 to 13c3232 Compare May 16, 2025 16:14
@codecov Codecov
Copy link

codecov bot commented May 16, 2025 •
edited
Loading

Codecov Report

Attention: Patch coverage is 91.89189% with 3 lines in your changes missing coverage. Please review.

Project coverage is 59.45%. Comparing base (c1142b9) to head (1568117).
Report is 1 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #9157       +/-   ##
===========================================
+ Coverage   45.00%   59.45%   +14.45%     
===========================================
  Files         206      138       -68     
  Lines        8219     5483     -2736     
  Branches     1846     1466      -380     
===========================================
- Hits         3699     3260      -439     
+ Misses       4080     1926     -2154     
+ Partials      440      297      -143
Components Coverage Δ
@tanstack/angular-query-devtools-experimental ∅ <ø> (∅)
@tanstack/angular-query-experimental 85.04% <ø> (ø)
@tanstack/eslint-plugin-query ∅ <ø> (∅)
@tanstack/query-async-storage-persister 43.85% <ø> (ø)
@tanstack/query-broadcast-client-experimental 24.39% <ø> (ø)
@tanstack/query-codemods ∅ <ø> (∅)
@tanstack/query-core 97.83% <90.90%> (-0.16%) ⬇️
@tanstack/query-devtools 3.56% <ø> (ø)
@tanstack/query-persist-client-core 78.32% <ø> (ø)
@tanstack/query-sync-storage-persister 84.61% <ø> (ø)
@tanstack/query-test-utils ∅ <ø> (∅)
@tanstack/react-query 95.98% <100.00%> (+0.63%) ⬆️
@tanstack/react-query-devtools 10.00% <ø> (ø)
@tanstack/react-query-next-experimental ∅ <ø> (∅)
@tanstack/react-query-persist-client 100.00% <ø> (ø)
@tanstack/solid-query 78.20% <ø> (ø)
@tanstack/solid-query-devtools ∅ <ø> (∅)
@tanstack/solid-query-persist-client 100.00% <ø> (ø)
@tanstack/svelte-query 88.15% <ø> (ø)
@tanstack/svelte-query-devtools ∅ <ø> (∅)
@tanstack/svelte-query-persist-client 100.00% <ø> (ø)
@tanstack/vue-query 70.85% <ø> (ø)
@tanstack/vue-query-devtools ∅ <ø> (∅)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Ephem Ephem marked this pull request as ready for review May 16, 2025 17:20
@Ephem Ephem mentioned this pull request May 19, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@TkDodo TkDodo Awaiting requested review from TkDodo

@juliusmarminge juliusmarminge Awaiting requested review from juliusmarminge

Assignees
No one assigned
Labels
package: query-core package: react-query
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Maximum update depth exceeded
1 participant
@Ephem