Theo's Typesafe CultTTC
Theo's Typesafe Cult•2y ago
Khao

I have been trying to get cache working with React-Query and Next.JS

Hello there, I'm trying to get this cache to work but I have searched far and wide and unless I'm blind or I didn't use the right keywords, I can't get this to work.

Here is the sample code:
const { data, isPending, isStale } = useQuery({
  queryKey: ["hilol"],
  queryFn: () => {
    console.log('HIIIII')
    return "Hi"
  },
  gcTime: 5 * 60 * 1000,
  staleTime: 7 * 60 * 1000
});


No matter how much refreshing I do on the page it still says it's pending and it's stale until the data loads in and the HIIIII gets logged.
Solution
By default React query doesn’t use a persistent cache - so when you refresh you lose everything.

Check out the docs here:

https://tanstack.com/query/latest/docs/framework/react/plugins/persistQueryClient
persistQueryClient | TanStack Query React Docs
This is set of utilities for interacting with "persisters" which save your queryClient for later use. Different persisters can be used to store your client and cache to many different storage layers.

Build Persisters
Jump to solution
Was this page helpful?