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

[ajwootto]

Describe the bug

• have a HydrationBoundary in a Next.js app which dehydrates a query that contains prefetched queries which have not been awaited serverside (ie. they are promises which are being serialized to work with suspense)
• the initial page load works correctly with the serverside prefetch data becoming available on the client
• submit a server action which does something that causes the prefetching component to refetch and re-render (For example, revalidatePath)
• even though the prefetch request is sent again when this happens, react query on the clientside does not seem to update its query cache with the new data when the new prefetch promise resolves
• this flow works properly when the prefetch is awaited serverside, ie. instead of sending a promise in the HydrationBoundary we send the resolved data. In that scenario the clientside cache is updated correctly when the same "server action + revalidatePath" function is called.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-query-fit2ih?file=app%2Fpage.tsx

Steps to reproduce

1. download the stackblitz (it doesn't work when running in their environment due to some mysterious "missing queryFn" error that doesn't happen locally)
2. npm install && npm run dev
3. visit localhost:3000 and click the "new pokemon" button. Notice that there is no new pokemon
4. visit localhost:3000/awaited and click the "new pokemon" button. Notice that there is a new pokemon.

Expected behavior

I would expect that the new promise triggered by the server action and sent down in the response should update the clientside query cache when it resolves. Instead this only seems to happen if the promise is awaited serverside and the data is sent in the HydrationBoundary rather than the promise.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: mac
• browser: chrome

Tanstack Query adapter

react-query

TanStack Query version

5.61.5

TypeScript version

5.3.3

Additional context

• the stackblitz I set up is based on the example linked in the Advanced Serverside Rendering guide, which does not seem to build successfully and may need to be updated:
  https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-app-prefetching
  I attempted to fix it by overriding the dependencies etc. but then I still received an error about a missing queryFn from react-query even though the queryFn was definitely set. This error does not happen when running the same code locally.

[TkDodo]

@Ephem is this the same issue you've been observing ?

[Ephem]

From a quick skim, it seems like it! I'll take a deeper look later, but thanks so much for the reproduction @ajwootto, I've seen this before but it's been elusive.