5 replies

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

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

TTC

Theo's Typesafe Cult•2y ago•

5 replies

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

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

HIIIII

gets logged.

Solution

persistQueryClient | TanStack Query React Docs

Jump to solution

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads