Bagaimana untuk menggunakan persistQueryClient dalam react-query?

Question

Saya menggunakan React Query untuk membuat panggilan API, tetapi apabila saya memuat semula halaman, keadaan hilang. Saya menyiarkan soalan pada Stack Overflow bertanya sama ada terdapat cara untuk mengekalkan data dalam pertanyaan tindak balas dan seseorang menjawab bahawa ia boleh dilakukan menggunakan persistQueryClient, tetapi saya cuba membaca dokumentasi dan masih tidak memahami cara ia berfungsi. Bolehkah sesiapa menjelaskan perkara ini?

Anda boleh merujuk pautan berikut untuk mengetahui lebih lanjut tentang persistQueryClient: https://tanstack.com/query/v4/docs/react/plugins/persistQueryClient

< ;br />

Answer 1

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