如何使用 react-query 中的 persistQueryClient？

Question

我正在使用 React Query 进行 API 调用，但是当我重新加载页面时，状态会丢失。我在 Stack Overflow 上发布了一个问题，询问是否有办法在 react-query 中持久化数据，然后有人回答说可以使用 persistQueryClient 来实现，但是我尝试阅读文档时仍然不理解它的工作原理。有人能解释一下吗？

您可以参考以下链接了解有关 persistQueryClient 的更多信息：https://tanstack.com/query/v4/docs/react/plugins/persistQueryClient

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