如何使用 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><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> )