foreign-sapphire

Data set with setQueryData is garbage collected (gets thrown out upon page refresh)

Not exactly sure how setting query data works when it comes to simple client state management, because each time I refresh the page it gets thrown out.

5 Replies

fascinating-indigo•3y ago

You’ll probably need to set the appropriate options on the query that you’re using setQueryData on (cacheTime, refetchOnWindowFocus, etc)

foreign-sapphireOP•3y ago

I am

      onSuccess: (data) => {
        const { userId, accessToken, refreshToken } = data.resolveGoogleAuth.jwt
        qc.setQueryData(['token'], accessToken);  
        qc.setQueryDefaults(['token'], { staleTime: 10000 * 60 })
        setCookie('TOKEN', { refreshToken }) 
        router.push('/')
      }

      onSuccess: (data) => {
        const { userId, accessToken, refreshToken } = data.resolveGoogleAuth.jwt
        qc.setQueryData(['token'], accessToken);  
        qc.setQueryDefaults(['token'], { staleTime: 10000 * 60 })
        setCookie('TOKEN', { refreshToken }) 
        router.push('/')
      }

And the my instance is set up like that as well

export function getQueryClient() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 10 * 60 * 1000,
        refetchOnMount: true,
        refetchOnWindowFocus: true,
        refetchOnReconnect: true,
      },
    },
  })

  return queryClient
}

export function getQueryClient() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 10 * 60 * 1000,
        refetchOnMount: true,
        refetchOnWindowFocus: true,
        refetchOnReconnect: true,
      },
    },
  })

  return queryClient
}

fascinating-indigo•3y ago

Maybe need one or more of those “refetchOnxxx” properties to be false?

foreign-sapphireOP•3y ago

I think the problem is that this token data is automatically set to inactive Which is garbage collected and thrown out on refresh So it's not 'stale' or 'fresh'

wise-white•3y ago

Hi, please be sure to understand that react-query is a memory cache by default. So yes on page refresh the cache is recreated from scratch. In case you need some "persistence", you should have a look at https://tanstack.com/query/v4/docs/react/plugins/persistQueryClient for ex

persistQueryClient | TanStack Query 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

Gaming

Programming

Data set with setQueryData is garbage collected (gets thrown out upon page refresh)

Did you find this page helpful?