search

TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
42.76k stars 2.92k forks source link

prefetchQuery not working in Next.js dynamic routes #8037

Closed mxswat closed 2 months ago

mxswat commented 2 months ago

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

https://github.com/user-attachments/assets/d7264f88-2e06-445b-a77e-8ec6f68542ea

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 commented 2 months ago

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: