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 3c1b221.

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	❌ Failed	5m 1s	View ↗

☁️ Nx Cloud last updated this comment at 2025-01-12 18:18:35 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/query-async-storage-persister

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

@tanstack/angular-query-experimental

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@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-next-experimental

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

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@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: 3c1b221

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 ;)

juliusmarminge · 2024-12-03T15:37:17Z

packages/react-query/src/HydrationBoundary.tsx

-            existingQuery.state.dataUpdatedAt
+              existingQuery.state.dataUpdatedAt ||
+            // @ts-expect-error
+            dehydratedQuery.promise?.status !== existingQuery.promise?.status


this might actually be working

What if we prefetch a query without await in a page that is static or cached, either fully or partially, and then client navigate to it with newer data in the cache? My guess is that there are/can be situations where we get a promise that will resolve to data that is actually older than the one we have on the client already?

Maybe the entirely correct way to do this would be to inspect the data the query resolves to before determining whether to update the cache with that data? Implementation-wise that's a lot tricker though unfortunately. :(

Maybe the entirely correct way to do this would be to inspect the data the query resolves to

this is something only users could verify though. Without query meta-data like dataUpdatedAt, react-query doesn’t know the age of the data. Are you suggesting we provide a way for users to extract a timestamp (age) from the promise data in some sort of callback option?

Is it? If we are using the fetch timestamp from the server to determine this when hydrating data, we can surely do that for promises too, just after they resolved? I'm sure it might be a big painful thing to implement, but is there some inherent thing about user/library land that blocks us from doing this in the library using the same logic?

To be clear, if we already have this query in the cache, this might require us to wait for the promise outside of the cache and only put the data in. Or even worse, to support fetching states properly, it might requires us to have some sort of "possibleUpdatePromise" or something that would not commit it's result to the cache if it's older.

TkDodo · 2024-12-29T20:38:57Z

@juliusmarminge what are we gonna do with this one?

juliusmarminge · 2024-12-30T01:38:17Z

Sorry completely forgot about this 😅

I think I had it sort of working but happy to jump on a call and talk about it still! Hit me up on discord when you have some time to go over it!

otherwise, we risk including promises that happen because of background updates (think persistQueryClient)

otherwise, we are re-using the cache and the query won't be in "pending" state the second time around

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 commented Dec 3, 2024

View reviewed changes

revert

85ee5bc

TkDodo mentioned this pull request Jan 10, 2025

Prefetched non-awaited query does not update clientside query cache via HydrationBoundary when server content is refetched #8369

Open

TkDodo linked an issue Jan 10, 2025 that may be closed by this pull request

Prefetched non-awaited query does not update clientside query cache via HydrationBoundary when server content is refetched #8369

Open

TkDodo and others added 4 commits January 10, 2025 09:45

Merge branch 'main' into julius/hydrate-promise

4d9645b

Merge branch 'main' into julius/hydrate-promise

a6d28f5

Merge branch 'main' into julius/hydrate-promise

fb114b9

fix: ?

c5eccf5

TkDodo marked this pull request as ready for review January 12, 2025 16:19

TkDodo added 2 commits January 12, 2025 17:42

fix: check for pending status again

6dbdf34

otherwise, we risk including promises that happen because of background updates (think persistQueryClient)

fix: clear serverQueryClient between "requests"

3c1b221

otherwise, we are re-using the cache and the query won't be in "pending" state the second time around

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

juliusmarminge Dec 3, 2024

Ephem Jan 10, 2025 •

edited

Loading

TkDodo Jan 10, 2025

Ephem Jan 10, 2025

TkDodo commented Dec 29, 2024

juliusmarminge commented Dec 30, 2024

fix: no hydration when new promise comes in #8383

Are you sure you want to change the base?

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

juliusmarminge Dec 3, 2024

Choose a reason for hiding this comment

Ephem Jan 10, 2025 • edited Loading

Choose a reason for hiding this comment

TkDodo Jan 10, 2025

Choose a reason for hiding this comment

Ephem Jan 10, 2025

Choose a reason for hiding this comment

TkDodo commented Dec 29, 2024

juliusmarminge commented Dec 30, 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 •

edited

Loading

juliusmarminge commented Dec 2, 2024 •

edited

Loading

juliusmarminge commented Dec 2, 2024 •

edited

Loading

juliusmarminge commented Dec 3, 2024 •

edited

Loading

Ephem Jan 10, 2025 •

edited

Loading