Comment utiliser persistQueryClient dans React-Query ?

Question

J'utilise React Query pour effectuer des appels API, mais lorsque je recharge la page, l'état est perdu. J'ai posté une question sur Stack Overflow demandant s'il existait un moyen de conserver les données dans la requête de réaction et quelqu'un a répondu que cela pouvait être fait en utilisant persistQueryClient, mais j'ai essayé de lire la documentation et je ne comprends toujours pas comment cela fonctionne. Quelqu'un peut-il expliquer cela ?

Vous pouvez vous référer au lien suivant pour en savoir plus sur persistQueryClient : https://tanstack.com/query/v4/docs/react/plugins/persistQueryClient

< ;br />

Answer 1

persistQueryClient est un wrapper autour du queryClient standard qui conserve le cache sur un support de stockage, tel que localStorage.

Pour définir et conserverQueryClient, nous avons besoin de :

1. Créer un client de requête avec un temps de cache long.

2. Créez un persistant.

3. Enveloppez le client de requête et persistez dans persistQueryClient.

Voici les exemples fournis par la documentation :

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