Theo's Typesafe Cult•6mo ago

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
});

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

2 Replies

Solution

greypixel•6mo ago

persistQueryClient | TanStack Query React Docs

KhaoOP•6mo ago

Ah that would make so much more sense, sorry i'm quite new to TanStack Query. Once I get it working I will mark you as the solution.

Gaming

Programming

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