Can't get cache working or/and don't understand how it works

[ignat]

Read the docs and rewatched videos a few times but still cannot make it work.

I have two NextJS pages, one has useQuery and another is static. When I browse these pages:

1. Page 1. useQuery is called for the first time. state changes from "loading" to "success", cache is created and becomes "stale" immediately.
2. Page 2. cache entry becomes "inactive".
3. Back to Page 1. state changes from "loading" to "success", cache becomes "stale".

At the step 3 I expect that the data is loaded from cache (and then does background refetch as staleTime=0) but instead I see hard load as at the step 1. queryKey doesn't change, default options, version 3.15.0.

What do I do wrong? Or is it expected behaviour? Should I manually load data from cache in this case?

Update: I have created a Sandbox and it works as expected. What could be the reason of failed cache in my case? Could other Providers affect QueryClientProvider?

[TkDodo]

If it works in a sandbox, the two most prominent gotchas would be:

1. queryKey mismatch, e.g. 1 vs ”1". Doesn’t seem to be the case here
2. new QueryClient being created inside your app, possibly inside the router. That would lead to a new client, and thus a new cache, on each route change.

[ignat]

I found the problem!

I was calling new QueryClient() inside MyApp function. So with any new page I got new query client.

When I moved that code to the top level I saw cache working properly:

// pages/_app.js
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient();

export default function MyApp({ Component, pageProps }) {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

I have updated the Sandbox example which could be used to start experimenting with NextJS + ReactQuery.

[TkDodo]

In nextjs, i think you’re supposed to create it inside the component but only create it once with useRef or useState, see: https://react-query.tanstack.com/guides/ssr#using-nextjs

[ignat]

Yes, useRef will work as well:

// pages/_app.js
import { useRef } from "react";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

export default function MyApp({ Component, pageProps }) {
  const queryClient = useRef(new QueryClient());
  return (
    <QueryClientProvider client={queryClient.current}>
      <Component {...pageProps} />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

The link you gave is for Server Side Render, which is a little different.

[TkDodo]

Yes, useRef will work as well:

yes, except that it creates a new QueryClient each time and discards it. Might be fine for a QueryClient, but I generally prefer state for that. The really equivalent ref code is more complex and people tend to get the typings wrong for that, which is why I changed the docs to use state: #2253

see also: https://tkdodo.eu/blog/use-state-for-one-time-initializations

[Ranjanlc]

Thanks @ignat . It helped me a lot
.