prefetchQuery not working in Next.js dynamic routes

[mxswat]

Describe the bug

Using prefetchQuery to pre-fetch data does not work in a Next.js dynamic route.

prefetchQuery works fine in a Next.js Static route.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/github/mxswat/react-query-hydration-bug

Steps to reproduce

Install dependencies, and run the project using npm run dev

1. Visit http://localhost:3000/
2. Notice that the data is already prefetched and does not have 'Loading...' shown
3. Visit http://localhost:3000/masseffect3
4. Notice that the data is not prefetched, and 'Loading...' is shown before the actual data is loaded.

Reproduction repo: https://github.com/mxswat/react-query-hydration-bug

(Attached is a video of this process below)

Expected behavior

As a user, when I visit http://localhost:3000/ I expect to see "Game Name - 1" without seeing "Loading..." (This works)

As a user, when I visit http://localhost:3000/masseffect3 I expect to see "Game Name - 1" without seeing "Loading..." (This does not work)

How often does this bug happen?

Every time

Screenshots or Videos

Screenshare.-.2024-09-10.9_55_21.AM.mp4

Platform

Operating System: Kubuntu 23.10
KDE Plasma Version: 5.27.8
KDE Frameworks Version: 5.110.0
Qt Version: 5.15.10
Kernel Version: 6.5.0-44-generic (64-bit)
Graphics Platform: X11
Processors: 12 × Intel® Core™ i7-10750H CPU @ 2.60GHz
Memory: 62.6 GiB of RAM
Graphics Processor: NVIDIA GeForce RTX 2070 with Max-Q Design/PCIe/SSE2
Manufacturer: Micro-Star International Co., Ltd.
Product Name: GS66 Stealth 10SF
System Version: REV:1.0

Browser:
Google Chrome
Version 127.0.6533.99 (Official Build) (64-bit)

Tanstack Query adapter

react-query

TanStack Query version

5.55.4

TypeScript version

5.5.4

Additional context

I found another user with a similar issue, but I haven't heard back from them https://www.reddit.com/r/nextjs/comments/1f3ht0v/nextjs_ssr_with_reactquery_dynamic_routes_not/

[TkDodo]

As a user, when I visit http://localhost:3000/ I expect to see "Game Name - 1" without seeing "Loading..." (This works)

For what it's worth, this also doesn't work for me. I can clearly see loading here, too:

https://stackblitz.com/github/mxswat/react-query-hydration-bug

What I can see is that you create an unstable query client in the render function in the ClientProviders, which throws away the cache. Please use the setup described in the docs:

• https://tanstack.com/query/v5/docs/framework/react/guides/ssr
• https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr

[mxswat]

Hi, thank you for the reply.

I updated the repo to create a query client like in the docs.

But the issue seems to persist. The home page works fine, but visiting /masseffect3 shows the "Loading..."

It's also worth mentioning that on codesandbox and my local machine visiting the home page, it does not show "Loading..." while on stackblitz, it does, and I'm not sure why.

[mxswat]

Just to let you know, I updated the bug reproduction repo, to include more logs.

And we noticed that the query cache has the data on the client, but even thought the query hash seems to match the one from the SSR, it still won't load the data on the dynamic route page.

[themagickoala]

@TkDodo is the updated reproduction sufficient to get this looked at further? This is currently blocking us from releasing a page.

[TkDodo]

not sure why you didn't just compare your code line by line, but the difference is on the dynamic route, you do:

<HydrationBoundary state={dehydrate(getQueryClient())}>

while on the static route, you do:

<HydrationBoundary state={dehydrate(client)}>

the static route is obviously correct, and everything works if you change your code accordingly here.

dehydrate(getQueryClient()) dehydrates a new, empty client because getQueryClient() always creates a new one on the server (on purpose).

[themagickoala]

@mxswat I've updated the above and a few more bits and it's no longer showing the same problem: https://codesandbox.io/p/devbox/unruffled-dijkstra-xlqp7p.

@TkDodo we'll take a look at this and see if it solves our problem. Thanks for your help!