Plugin de base de données React Query : stratégies de réchauffement et d'élimination du cache

React Query Database Plugin : stratégies de mise en œuvre du préchauffage et de l'expulsion du cache, exemples de code concrets requis

Alors que la complexité des applications frontales modernes continue d'augmenter, la gestion des données et la mise en cache deviennent de plus en plus importantes. React Query est une puissante bibliothèque de gestion de données qui nous aide à gérer les opérations de récupération, de mise en cache et de mise à jour des données dans les applications React. Cependant, React Query utilise par défaut des stratégies de mise en cache intégrées. Si nous avons besoin d'un contrôle de cache plus avancé, tel que des stratégies de préchauffage et d'expulsion du cache, nous pouvons utiliser le plugin de base de données React Query pour y parvenir.

Dans cet article, nous présenterons comment utiliser le plug-in de base de données React Query pour implémenter des stratégies de préchauffage et d'expulsion du cache, et fournirons des exemples de code spécifiques.

Tout d’abord, nous devons installer le plugin de base de données React Query et React Query. Elles peuvent être installées à l'aide de la commande suivante :

npm install react-query react-query-database

Une fois l'installation terminée, nous pouvons introduire ces bibliothèques dans l'application :

import { QueryClient, QueryClientProvider } from 'react-query';
import { createDatabaseCache } from 'react-query-database';

Ensuite, nous allons créer un QueryClient et y ajouter le plugin de cache de base de données :

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 5, // 设置默认缓存时间为 5 分钟
      plugins: [
        createDatabaseCache(), // 添加数据库缓存插件
      ],
    },
  },
});

Maintenant , nous avons ajouté avec succès le plug-in de cache de base de données à QueryClient. Ensuite, nous pouvons définir des stratégies personnalisées de préchauffage et d’expulsion du cache.

Tout d’abord, voyons comment implémenter l’échauffement du cache. Supposons que nous ayons une demande pour obtenir des informations utilisateur :

import { useQuery } from 'react-query';

const fetchUser = async (userId) => {
  // 模拟获取用户信息的异步请求
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();
  return data;
};

const UserProfile = ({ userId }) => {
  const { data } = useQuery(['user', userId], () => fetchUser(userId));

  if (data) {
    // 渲染用户信息
  }

  return null;
};

Nous souhaitons maintenant précharger certaines informations utilisateur dans le cache lorsque l'application démarre pour améliorer l'expérience utilisateur. On peut ajouter le code suivant au point d'entrée de l'application :

import { useQueryClient } from 'react-query';

const App = () => {
  const queryClient = useQueryClient();

  useEffect(() => {
    const userIds = [1, 2, 3]; // 假设我们要预热的用户 ID 列表

    userIds.forEach((userId) => {
      const queryKey = ['user', userId];
      queryClient.prefetchQuery(queryKey, () => fetchUser(userId));
    });
  }, []);

  return (
    // 应用程序的其他内容
  );
};

Dans cet exemple, nous définissons un tableau contenant les ID utilisateurs à préchauffer, et utilisons la méthode queryClient.prefetchQuery dans useEffect pour préchauffer le cache. La fonction fetchUser sera appelée pendant le préchauffage pour stocker les données dans le cache. De cette manière, lorsque le composant UserProfile doit restituer des informations utilisateur, il récupère immédiatement les données du cache sans faire une autre requête réseau.

Ensuite, voyons comment mettre en œuvre la stratégie d'expulsion du cache. Supposons que nous ayons une demande pour obtenir une liste d'articles :

import { useQuery } from 'react-query';

const fetchArticles = async () => {
  // 模拟获取文章列表的异步请求
  const response = await fetch('/api/articles');
  const data = await response.json();
  return data;
};

const ArticlesList = () => {
  const { data } = useQuery('articles', fetchArticles);

  if (data) {
    // 渲染文章列表
  }

  return null;
};

Par défaut, la stratégie de mise en cache de React Query consiste à enregistrer les données en mémoire et à les éliminer automatiquement après une certaine période de temps. Cependant, nous pouvons parfois être amenés à mettre en œuvre une stratégie d’élimination personnalisée. Nous pouvons y parvenir en définissant le paramètre staleTime de la requête :

const { data } = useQuery('articles', fetchArticles, {
  staleTime: 1000 * 60 * 30, // 设置缓存过期时间为 30 分钟
});

Dans cet exemple, nous définissons le délai d'expiration du cache à 30 minutes. Lorsque les données expirent, React Query lancera automatiquement une nouvelle requête pour obtenir les dernières données et mettre à jour le cache.

En plus de définir le délai d'expiration du cache, nous pouvons également utiliser le paramètre cacheTime de la requête pour définir la durée maximale pendant laquelle les données restent dans le cache. React Query supprimera les données du cache lorsqu'elles dépassent cette durée :

const { data } = useQuery('articles', fetchArticles, {
  staleTime: 1000 * 60 * 30, // 设置缓存过期时间为 30 分钟
  cacheTime: 1000 * 60 * 60 * 24, // 设置最长缓存时间为 24 小时
});

Dans cet exemple, nous définissons la durée maximale du cache à 24 heures. Cela signifie que les données seront supprimées après 24 heures, même si le délai d'expiration du cache n'est pas dépassé.

En utilisant le plug-in de base de données React Query, nous pouvons facilement mettre en œuvre des stratégies de préchauffage et d'élimination du cache pour améliorer les performances des applications et l'expérience utilisateur. Dans cet article, nous expliquons comment installer et configurer le plugin de base de données React Query et fournissons des exemples de code spécifiques pour le préchauffage et l'expulsion du cache. Espérons que ces exemples vous aideront à mieux comprendre et utiliser le plugin de base de données React Query et à optimiser vos applications.

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!