useQuery with same queryKey returning undefined data while loading – instead of cached data. (NextJS)

[mcgrealife]

Minimal demo: https://github.com/mcgrealife/tanstack-nextjs-minimal (readme contains an "open in gitpod" button)

I have 2 NextJS pages, each useQuery with the same queryKey. When navigating to page2 (after the query data is cached), page2 returns data as 'undefined' while the status is 'loading'. I was expecting it to return the cached data first and then fetch new data.

I might be misunderstanding the 'stale while revalidate' idea.
Or maybe there is some conflict with NextJs _app layout or components.

Any help is appreciated!

[mcgrealife]

I found the answer in https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable!

The problem is that I was instantiating the QueryClient inside of the App component.
The solution was simply to move the QueryClient up 1 line, outside of the App component!
This way, a single query client (and its cache!) persits between re-renders, route changes, etc.