TanStackT
TanStack•3y ago
worthy-azure

How to use a persister with a cacheTime of zero?

I tried explicitly setting the 
cacheTime
 to 
0
 in the creation of the QueryClient but every time i refresh the page i see all queries being stored in local storage. I want to not do that and explicitly opt in to persisting via localstorage on a query by query basis.

For example, i have an endpoint that takes a few seconds to resolve with data and that data is pretty static. I want to persist this to localStorage and cache it for 30 minutes. What 
QueryClient
 options should i be using? what should my 
useQuery
 look like for that scenario?

Current code:

import { QueryClient } from "@tanstack/react-query"
import { persistQueryClient } from "@tanstack/react-query-persist-client"
import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister"

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      refetchOnWindowFocus: false,
      cacheTime: 0,
      staleTime: 0,
      // cacheTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
})

const localStoragePersister = createSyncStoragePersister({ storage: window.localStorage })

persistQueryClient({
  queryClient,
  persister: localStoragePersister,
})
Was this page helpful?