persistQueryClient ialah pembalut pada queryClient standard yang mengekalkan cache ke beberapa medium storan, seperti localStorage.

Untuk menentukan dan persistQueryClient, kami memerlukan:

1 Buat klien pertanyaan dengan masa cache yang lama.

2.

3 Bungkus klien pertanyaan dan teruskan dalam persistQueryClient.

Berikut adalah contoh yang disediakan oleh dokumentasi:

import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'

// 1. the query client
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
})

// 2. the persister
const persister = createSyncStoragePersister({
  storage: window.localStorage,
})

// 3. Replace the <QueryClientProvider> with <PersistQueryClientProvider>
ReactDOM.createRoot(rootElement).render(
  <PersistQueryClientProvider
    client={queryClient}
    persistOptions={{ persister }}
  >
    <App />
  </PersistQueryClientProvider>
)