fix: no hydration when new promise comes in #8383

juliusmarminge · 2024-12-02T16:09:12Z

No description provided.

nx-cloud · 2024-12-02T16:09:40Z

View your CI Pipeline Execution ↗ for commit 8c2023e.

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	3m 21s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	1m 59s	View ↗

☁️ Nx Cloud last updated this comment at 2025-02-17 12:35:04 UTC

pkg-pr-new · 2024-12-02T16:11:59Z

Open in Stackblitz

More templates

@tanstack/angular-query-devtools-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/angular-query-experimental

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

@tanstack/query-async-storage-persister

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

@tanstack/query-core

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 8c2023e

juliusmarminge · 2024-12-02T16:17:50Z

really weird, queryFn is getting called and returns the updated value, but the serializer is called only with teh initial count

juliusmarminge · 2024-12-02T16:21:27Z

before digging deeper, can you confirm if this is a bug or expected @TkDodo ?

I think we might not be in a pending state so the promise doesn't get sent down?

https://github.com/juliusmarminge/query/blob/cf37452e72e44609e49600f8b7c124cc5a197af5/packages/query-core/src/hydration.ts#L83-L92

juliusmarminge · 2024-12-02T16:22:07Z

packages/query-core/src/__tests__/hydration.test.tsx

+    // --- server ---
+    countRef.current++
+    const promise2 = serverQueryClient.prefetchQuery(query)
+
+    const dehydrated2 = dehydrate(serverQueryClient)


assume this is a server fn calling revalidatePath() so the page re-renders

TkDodo · 2024-12-02T18:28:43Z

you’re right: we only send the promise when we are in pending state. The fix is likely to send the promise when we are in fetchStatus: 'fetching' instead 💡

juliusmarminge · 2024-12-02T18:54:57Z

i believe another issue is we're getting dataUpdatedAt: 0 so it does't rehydrate

juliusmarminge · 2024-12-02T19:00:41Z

feels like we need some other state that would let us know if the promise is fresher then we need to set the queries' promise or something.. this goes deeper than I thought

TkDodo · 2024-12-02T19:04:12Z

I'd say if we get a promise, we should always assume it's newer and hydrate its data, no?

juliusmarminge · 2024-12-02T19:32:09Z

how do we check for that wihtout causing infinite re-renders in <HydrationBoundary> ?

juliusmarminge · 2024-12-02T20:02:39Z

struggling to figuring out how to properly filter out the queries to put in the hydration queue

CleanShot.2024-12-02.at.21.01.26.mp4

TkDodo · 2024-12-03T07:36:42Z

@juliusmarminge have you widened this check?

query/packages/react-query/src/HydrationBoundary.tsx

Lines 74 to 76 in 8fe9010

    
           const hydrationIsNewer = 
        
             dehydratedQuery.state.dataUpdatedAt > 
        
             existingQuery.state.dataUpdatedAt

to something like:

const hydrationIsNewer =
  dehydratedQuery.state.dataUpdatedAt >
    existingQuery.state.dataUpdatedAt || dehydratedQuery.promise

so that whenever a promise is included, we put it the queue.

juliusmarminge · 2024-12-03T07:38:52Z

yea that causes infinite rerenders

TkDodo · 2024-12-03T07:39:58Z

interesting; let’s debug that together today if you have some time?

juliusmarminge · 2024-12-03T07:45:14Z

interesting; let’s debug that together today if you have some time?

sure! what time? I can sneak in a short seesion anytime after 10am gmt+1.

TkDodo · 2024-12-03T09:59:06Z

I pinged you on discord ;)

TkDodo · 2025-01-15T19:13:58Z

what's the unredacted error?

I wish I knew 😂. How can we find out?

stramel · 2025-01-22T22:56:31Z

what's the unredacted error?

I wish I knew 😂. How can we find out?

I was able to find the error by passing NODE_ENV=development to the build command.

❯ NODE_ENV=development pnpm build

> react-next-15@ build /Users/mstramel/GitHub/query/integrations/react-next-15
> next build

 ⚠ You are using a non-standard "NODE_ENV" value in your environment. This creates inconsistencies in the project and is strongly advised against. Read more: https://nextjs.org/docs/messages/non-standard-node-env
   ▲ Next.js 15.1.2

   Creating an optimized production build ...
 ✓ Compiled successfully
   Skipping linting
 ✓ Checking validity of types
 ✓ Collecting page data
Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useEffect')
    at t.useEffect (/Users/mstramel/GitHub/query/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:68:6422)
    at o (/Users/mstramel/GitHub/query/integrations/react-next-15/.next/server/chunks/379.js:1:18168)
    at react-stack-bottom-frame (/Users/mstramel/GitHub/query/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:229305)
    at renderWithHooks (/Users/mstramel/GitHub/query/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:66965)
    at renderElement (/Users/mstramel/GitHub/query/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:81693)
    at retryNode (/Users/mstramel/GitHub/query/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:140140)
    at renderNodeDestructive (/Users/mstramel/GitHub/query/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:136545)
    at finishFunctionComponent (/Users/mstramel/GitHub/query/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:67975)
    at renderElement (/Users/mstramel/GitHub/query/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:83174)
    at renderElement (/Users/mstramel/GitHub/query/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:25:135151)
Export encountered an error on /_not-found/page: /_not-found, exiting the build.
 ⨯ Static worker exited with code: 1 and signal: null
 ELIFECYCLE  Command failed with exit code 1.

Possibly related to vercel/next.js#65447

UPDATE: Updated to 15.1.6 and got a similar error but different.

 Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
Error: <Html> should not be imported outside of pages/_document.
Read more: https://nextjs.org/docs/messages/no-document-import-in-page

Seems like something with Next.js 15

juliusmarminge · 2025-01-26T10:32:35Z

export const dynamic = "force-dynamic" on app/page.tsx also makes it go away, so it seems like it doesn't identify that the page is doing a dynamic fetch call 🤔

juliusmarminge · 2025-01-26T10:41:57Z

OK I managed to fix this, but it means that Next.js internals are leaking into query-core:

With this rethrow we get a dynamic page without any force-dynamic directives

packages/query-core/src/hydration.ts

juliusmarminge · 2025-01-26T11:10:59Z

Hmm seems like the CI test run is running out of memory 👀 https://cloud.nx.app/runs/Qjh3Jk3Wxc/task/%40tanstack%2Freact-query%3Atest%3Alib

juliusmarminge · 2025-02-15T10:03:57Z

Can you help me get the PR checks passing @TkDodo and/or @Ephem ?

TkDodo · 2025-02-16T10:16:18Z

seems like we’re running into out of memory:

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

let’s try setting more memory for the test run: 71a4453

codecov · 2025-02-17T12:35:17Z

Codecov Report

Attention: Patch coverage is 62.50000% with 6 lines in your changes missing coverage. Please review.

Project coverage is 63.06%. Comparing base (bb25d06) to head (8c2023e).
Report is 2 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #8383       +/-   ##
===========================================
+ Coverage   46.25%   63.06%   +16.80%     
===========================================
  Files         199      135       -64     
  Lines        7534     4852     -2682     
  Branches     1721     1365      -356     
===========================================
- Hits         3485     3060      -425     
+ Misses       3670     1547     -2123     
+ Partials      379      245      -134

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	`∅ <ø> (∅)`
@tanstack/angular-query-experimental	`88.65% <ø> (ø)`
@tanstack/eslint-plugin-query	`∅ <ø> (∅)`
@tanstack/query-async-storage-persister	`43.85% <ø> (ø)`
@tanstack/query-broadcast-client-experimental	`∅ <ø> (∅)`
@tanstack/query-codemods	`∅ <ø> (∅)`
@tanstack/query-core	`93.95% <60.00%> (-0.21%)`	⬇️
@tanstack/query-devtools	`4.78% <ø> (ø)`
@tanstack/query-persist-client-core	`57.73% <ø> (ø)`
@tanstack/query-sync-storage-persister	`84.61% <ø> (ø)`
@tanstack/react-query	`95.37% <66.66%> (-0.59%)`	⬇️
@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	`87.33% <ø> (ø)`
@tanstack/svelte-query-devtools	`∅ <ø> (∅)`
@tanstack/svelte-query-persist-client	`100.00% <ø> (ø)`
@tanstack/vue-query	`71.01% <ø> (ø)`
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

stramel · 2025-02-18T04:04:57Z

Thank you @juliusmarminge and @TkDodo for all the work to get his fixed! We appreciate the hard work!

add failing repro test

050c9d5

github-actions bot added the package: query-core label Dec 2, 2024

update assertinos

524f5ff

add logg

cf37452

juliusmarminge commented Dec 2, 2024

View reviewed changes

juliusmarminge added 4 commits December 2, 2024 17:34

ehm - maybe fix?

d82cfb2

rm -only

6eaf6fc

make example

8c7ccf2

upd

4efa642

ad debug logs

f32f6e3

more debugging

77362c4

github-actions bot added the package: react-query label Dec 2, 2024

juliusmarminge added 3 commits December 3, 2024 16:15

push

5fa1a33

maybe???

7eec72d

rm log

edda7ba

juliusmarminge added 2 commits January 26, 2025 11:44

rethrow next build error

9d3b116

Merge branch 'main' into julius/hydrate-promise

9ec623a

juliusmarminge commented Jan 26, 2025

View reviewed changes

packages/query-core/src/hydration.ts Outdated Show resolved Hide resolved

kick off ci again

9ebf869

add shouldRedactError option

7584928

muzaf-dev mentioned this pull request Feb 12, 2025

Error occurred prerendering page "/_not-found" with pageExtensions option vercel/next.js#65447

Open

juliusmarminge added 2 commits February 15, 2025 10:48

Merge branch 'main' into julius/hydrate-promise

cef39db

pluralize

a346f39

juliusmarminge requested review from TkDodo and Ephem February 15, 2025 09:58

docs

8448f7b

github-actions bot added the documentation Improvements or additions to documentation label Feb 15, 2025

chore: more memory

71a4453

TkDodo and others added 6 commits February 16, 2025 11:16

Merge branch 'main' into julius/hydrate-promise

9f555a2

chore: revert more memory

4239947

don't compare statuses if they don't exist

9ef516c

ci: apply automated fixes

a1d1c91

Merge branch 'main' into julius/hydrate-promise

4c1dc96

lint

8c2023e

TkDodo merged commit 6ca0eb7 into TanStack:main Feb 17, 2025
6 of 7 checks passed

joseph0926 mentioned this pull request Feb 21, 2025

Maximum update depth exceeded #8677

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: no hydration when new promise comes in #8383

fix: no hydration when new promise comes in #8383

juliusmarminge commented Dec 2, 2024

nx-cloud bot commented Dec 2, 2024 •

edited

Loading

pkg-pr-new bot commented Dec 2, 2024 •

edited

Loading

juliusmarminge commented Dec 2, 2024

juliusmarminge commented Dec 2, 2024 •

edited

Loading

juliusmarminge Dec 2, 2024

TkDodo commented Dec 2, 2024

juliusmarminge commented Dec 2, 2024

juliusmarminge commented Dec 2, 2024

TkDodo commented Dec 2, 2024

juliusmarminge commented Dec 2, 2024 •

edited

Loading

juliusmarminge commented Dec 2, 2024 •

edited

Loading

TkDodo commented Dec 3, 2024

juliusmarminge commented Dec 3, 2024

TkDodo commented Dec 3, 2024

juliusmarminge commented Dec 3, 2024 •

edited

Loading

TkDodo commented Dec 3, 2024

TkDodo commented Jan 15, 2025

stramel commented Jan 22, 2025 •

edited

Loading

juliusmarminge commented Jan 26, 2025

juliusmarminge commented Jan 26, 2025 •

edited

Loading

juliusmarminge commented Jan 26, 2025

juliusmarminge commented Feb 15, 2025

TkDodo commented Feb 16, 2025

codecov bot commented Feb 17, 2025 •

edited

Loading

stramel commented Feb 18, 2025

fix: no hydration when new promise comes in #8383

fix: no hydration when new promise comes in #8383

Conversation

juliusmarminge commented Dec 2, 2024

nx-cloud bot commented Dec 2, 2024 • edited Loading

pkg-pr-new bot commented Dec 2, 2024 • edited Loading

juliusmarminge commented Dec 2, 2024

juliusmarminge commented Dec 2, 2024 • edited Loading

juliusmarminge Dec 2, 2024

Choose a reason for hiding this comment

TkDodo commented Dec 2, 2024

juliusmarminge commented Dec 2, 2024

juliusmarminge commented Dec 2, 2024

TkDodo commented Dec 2, 2024

juliusmarminge commented Dec 2, 2024 • edited Loading

juliusmarminge commented Dec 2, 2024 • edited Loading

TkDodo commented Dec 3, 2024

juliusmarminge commented Dec 3, 2024

TkDodo commented Dec 3, 2024

juliusmarminge commented Dec 3, 2024 • edited Loading

TkDodo commented Dec 3, 2024

TkDodo commented Jan 15, 2025

stramel commented Jan 22, 2025 • edited Loading

juliusmarminge commented Jan 26, 2025

juliusmarminge commented Jan 26, 2025 • edited Loading

juliusmarminge commented Jan 26, 2025

juliusmarminge commented Feb 15, 2025

TkDodo commented Feb 16, 2025

codecov bot commented Feb 17, 2025 • edited Loading

Codecov Report

stramel commented Feb 18, 2025

nx-cloud bot commented Dec 2, 2024 •

edited

Loading

pkg-pr-new bot commented Dec 2, 2024 •

edited

Loading

juliusmarminge commented Dec 2, 2024 •

edited

Loading

juliusmarminge commented Dec 2, 2024 •

edited

Loading

juliusmarminge commented Dec 2, 2024 •

edited

Loading

juliusmarminge commented Dec 3, 2024 •

edited

Loading

stramel commented Jan 22, 2025 •

edited

Loading

juliusmarminge commented Jan 26, 2025 •

edited

Loading

codecov bot commented Feb 17, 2025 •

edited

Loading