如何使用 react-query 中的 persistQueryClient？
P粉908643611
2023-07-27 17:13:29
<p>我正在使用 React Query 進行 API 調用，但是當我重新加載頁面時，狀態會丟失。我在 Stack Overflow 上發布了一個問題，詢問是否有辦法在 react-query 中持久化數據，然後有人回答說可以使用 persistQueryClient 來實現，但是我嘗試閱讀文件時仍然不理解它的工作原理。有人能解釋一下嗎？ </p><p>您可以參考以下連結以了解更多關於persistQueryClient 的資訊：https://tanstack.com/query/v4/docs/react/plugins/persistQueryClient</p><p><lt;p>< ;br /></p>
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> )