T
TanStack•3y ago
flat-fuchsia

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,
})
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,
})
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?