如何使用 react-query 中的 persistQueryClient？

Question

我正在使用 React Query 進行 API 調用，但是當我重新加載頁面時，狀態會丟失。我在 Stack Overflow 上發布了一個問題，詢問是否有辦法在 react-query 中持久化數據，然後有人回答說可以使用 persistQueryClient 來實現，但是我嘗試閱讀文件時仍然不理解它的工作原理。有人能解釋一下嗎？

您可以參考以下連結以了解更多關於persistQueryClient 的資訊：https://tanstack.com/query/v4/docs/react/plugins/persistQueryClient

< ;br />

Answer 1

persistQueryClient 是標準 queryClient 的包裝，它將快取持久化到某種儲存介質，例如 localStorage。

要定義和 persistQueryClient，我們需要：

1. 使用長的快取時間建立一個 query client。

2. 建立一個 persister。

3. 將 query client 和 persister 包裝在 persistQueryClient 中。

以下是文件提供的範例：

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