Comment utiliser persistQueryClient dans React-Query ?
P粉908643611
P粉908643611 2023-07-27 17:13:29
0
1
443

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

P粉908643611
P粉908643611

répondre à tous (1)
P粉176980522

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  with  ReactDOM.createRoot(rootElement).render(    )
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!