Comment implémenter la mise en cache des données et le stockage persistant dans React Query ?

Comment implémenter la mise en cache des données et le stockage persistant dans React Query ?

À mesure que la complexité des applications frontales augmente, la gestion des données devient très importante. React Query est un outil puissant d'acquisition et de gestion de données. Il fournit un moyen de simplifier la récupération, la mise en cache et la synchronisation des données, nous aidant ainsi à créer rapidement des applications efficaces et faciles à entretenir.

Bien que React Query ait une fonction de mise en cache de mémoire par défaut, les données mises en cache seront perdues après l'actualisation de la page. Pour résoudre ce problème, nous devons conserver les données du cache sur le stockage local. Dans cet article, nous explorerons comment implémenter la mise en cache des données et le stockage persistant dans React Query.

Tout d'abord, nous devons installer React Query :

npm install react-query

Ensuite, voyons comment utiliser React Query pour obtenir des données, les mettre en cache et les conserver.

import React from 'react';
import { useQuery, QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
};

const DataComponent = () => {
  const { data, isLoading, error } = useQuery('data', fetchData);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <DataComponent />
    </QueryClientProvider>
  );
};

export default App;

Dans le code ci-dessus, nous utilisons le hook useQuery pour obtenir les données. Nous passons un identifiant unique 'data' comme clé de requête, et une fonction asynchrone pour récupérer les données fetchData. React Query mettra automatiquement en cache nos données et utilisera les données mises en cache dans les requêtes futures. useQuery 钩子来获取数据。我们传递一个唯一的标识符 'data' 作为查询键，以及一个取数据的异步函数 fetchData。React Query 会自动缓存我们的数据，并在以后的请求中使用缓存数据。

现在，我们来实现数据的持久化存储。我们可以使用 queryClient 的 getQueryData 和 setQueryData 方法来手动缓存和获取数据。同时，我们可以使用 localStorage 或其他类似于 localStorage 的持久化存储方案将数据保存在本地。

const fetchData = async () => {
  const cachedData = queryClient.getQueryData('data');

  if (cachedData) {
    return cachedData;
  }

  const response = await fetch('https://api.example.com/data');
  const data = response.json();

  queryClient.setQueryData('data', data);

  localStorage.setItem('data', JSON.stringify(data));

  return data;
};

const DataComponent = () => {
  const { data, isLoading, error } = useQuery('data', fetchData);

  // ...

  return (
    // ...
  );
};

const App = () => {
  const cachedData = JSON.parse(localStorage.getItem('data'));

  if (cachedData) {
    queryClient.setQueryData('data', cachedData);
  }

  return (
    // ...
  );
};

在上述代码中，我们首先通过 queryClient.getQueryData 方法尝试从缓存中获取数据。如果数据存在，则直接返回缓存的数据，避免重新发起请求。如果数据不存在，则进行正常的数据请求流程，并使用 queryClient.setQueryData 方法将数据缓存起来。

在 App 组件中，我们首先尝试从本地存储中获取缓存的数据。如果数据存在，则使用 queryClient.setQueryData 方法将数据设置为初始缓存数据。

通过上述代码示例，我们成功实现了在 React Query 中的数据缓存和持久化存储。这使得我们的应用程序能够更高效地管理数据，并在刷新页面后能够恢复之前的状态。

总结：

• 使用 React Query 可以方便地获取和管理数据。
• React Query 默认具有内存缓存功能，但刷新页面后，缓存的数据将丢失。
• 我们可以使用 queryClient 的 getQueryData 和 setQueryData 方法手动缓存和获取数据。
• 我们可以使用 localStorage 或其他类似于 localStorage
Maintenant, implémentons le stockage persistant des données. Nous pouvons manuellement mettre en cache et obtenir des données à l'aide des méthodes getQueryData et setQueryData de queryClient. Dans le même temps, nous pouvons utiliser localStorage ou d'autres solutions de stockage persistantes similaires à localStorage pour sauvegarder les données localement.
• rrreee
Dans le code ci-dessus, nous essayons d'abord d'obtenir les données du cache via la méthode queryClient.getQueryData. Si les données existent, les données mises en cache sont renvoyées directement pour éviter de relancer la requête. Si les données n'existent pas, poursuivez le processus normal de demande de données et utilisez la méthode queryClient.setQueryData pour mettre les données en cache.

🎜Dans le composant App, nous essayons d'abord d'obtenir les données mises en cache à partir du stockage local. Si les données existent, utilisez la méthode queryClient.setQueryData pour définir les données sur les données initiales mises en cache. 🎜🎜Grâce aux exemples de code ci-dessus, nous avons implémenté avec succès la mise en cache des données et le stockage persistant dans React Query. Cela permet à notre application de gérer les données plus efficacement et de restaurer l'état précédent après avoir actualisé la page. 🎜🎜Résumé : 🎜

🎜Utilisez React Query pour obtenir et gérer facilement des données. 🎜🎜React Query a une fonction de mise en cache de mémoire par défaut, mais après avoir actualisé la page, les données mises en cache seront perdues. 🎜🎜Nous pouvons manuellement mettre en cache et obtenir des données en utilisant les méthodes getQueryData et setQueryData de queryClient. 🎜🎜Nous pouvons utiliser localStorage ou d'autres solutions de stockage persistantes similaires à localStorage pour sauvegarder les données localement. 🎜🎜Grâce à la mise en cache des données et au stockage persistant, nous pouvons améliorer les performances de l'application et restaurer l'état précédent. 🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!