Wie verwende ich persistQueryClient in React-Query?

Question

Ich verwende React Query, um API-Aufrufe durchzuführen, aber wenn ich die Seite neu lade, geht der Status verloren. Ich habe auf Stack Overflow eine Frage gepostet, in der ich gefragt habe, ob es eine Möglichkeit gibt, Daten in React-Query beizubehalten, und jemand hat geantwortet, dass dies mit persistQueryClient möglich sei, aber ich habe versucht, die Dokumentation zu lesen, verstehe aber immer noch nicht, wie es funktioniert. Kann das jemand erklären?

Sie können auf den folgenden Link verweisen, um mehr über persistQueryClient zu erfahren: 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>
)