Plugin de base de données React Query : meilleures pratiques pour la pagination des données

Plug-in de base de données React Query : bonnes pratiques pour implémenter la pagination des données

Introduction

React Query est une puissante bibliothèque de gestion d'état utilisée pour implémenter la gestion des données dans les applications React. Il fournit un moyen simple et intuitif de gérer l'acquisition, la mise en cache, la mise à jour et la synchronisation des données, et convient parfaitement à la gestion des scénarios de pagination de données. Dans cet article, nous explorerons les meilleures pratiques de pagination des données avec React Query, tout en fournissant quelques exemples de code concrets.

Introduction à React Query

React Query fournit une solution d'acquisition et de gestion de données basée sur React Hooks. Il peut facilement gérer la récupération, la mise en cache et la mise à jour des données, et prend en charge l'interrogation et le filtrage des données, ainsi que des fonctions de gestion telles que la synchronisation des données et la gestion des erreurs. React Query utilise également un mécanisme basé sur le cache qui maximise l'utilisation du cache pour améliorer les performances et réduire les requêtes réseau tout en maintenant la cohérence des données.

La nécessité d'une pagination des données

Dans la plupart des applications, les données doivent généralement être chargées page par page. Lorsque la quantité de données est importante, le chargement de toutes les données en même temps peut entraîner des problèmes de performances et augmenter les coûts de transmission sur le réseau. Par conséquent, le chargement de données dans des pages est une pratique courante qui peut améliorer l'expérience utilisateur et les performances globales de votre application.

Bonnes pratiques pour implémenter la pagination de données avec React Query

Voici quelques bonnes pratiques pour utiliser React Query pour implémenter la pagination de données :

1 Définir la fonction de requête de React Query

Tout d'abord, nous devons définir la fonction de requête de. Réagissez à la requête. Obtenez des données. La fonction de requête doit inclure un paramètre pour spécifier le numéro de page actuel (page) et obtenir les données correspondantes en fonction du numéro de page. Dans le même temps, nous pouvons utiliser QueryKeys pour définir une clé unique pour chaque requête afin de faciliter la mise en cache et les requêtes des données.

const fetchUsers = async (page) => {
  const response = await fetch(`/api/users?page=${page}`);
  const data = await response.json();
  return data;
};

const queryKeys = (page) => ['users', { page }];

2. Utilisez useQuery pour obtenir des données

Utilisez la fonction de hook useQuery pour obtenir facilement des données et utilisez le mécanisme de mise en cache de React Query pour optimiser les performances. Transmettez simplement la fonction de requête et la clé de requête.

const UsersList = () => {
  const { isLoading, isError, data } = useQuery(queryKeys(page), fetchUsers);
  
  if (isLoading) {
    return <div>Loading...</div>;
  }
  
  if (isError) {
    return <div>Error loading data</div>;
  }
  
  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

3. Gérer la logique de pagination

Afin d'implémenter la pagination, nous devons suivre le numéro de page actuel et fournir une certaine interaction de l'utilisateur pour changer de numéro de page. Vous pouvez utiliser le hook useState pour définir l'état currentPage et le mettre à jour en fonction de l'interaction de l'utilisateur. Ensuite, nous pouvons utiliser currentPage comme paramètre de la fonction de requête pour obtenir les données du numéro de page correspondant.

const UsersList = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const { isLoading, isError, data } = useQuery(queryKeys(currentPage), fetchUsers);
  
  const handlePreviousPage = () => {
    setCurrentPage((prevPage) => prevPage - 1);
  };
  
  const handleNextPage = () => {
    setCurrentPage((prevPage) => prevPage + 1);
  };
  
  if (isLoading) {
    return <div>Loading...</div>;
  }
  
  if (isError) {
    return <div>Error loading data</div>;
  }
  
  return (
    <div>
      <button onClick={handlePreviousPage} disabled={currentPage === 1}>
        Previous Page
      </button>
      <button onClick={handleNextPage}>
        Next Page
      </button>
      
      <ul>
        {data.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

4. Ajoutez la mise en cache et la prélecture des données

React Query utilise un mécanisme basé sur le cache pour maximiser l'utilisation du cache afin d'améliorer les performances. Par conséquent, lorsque la page est chargée, les données sont automatiquement mises en cache et extraites du cache lors de la requête suivante. De plus, nous pouvons utiliser le hook useQueryPrefetch pour préparer à l'avance les données de la page suivante afin que les données puissent être chargées plus rapidement lorsque l'utilisateur change de numéro de page.

const UsersList = () => {
  // ...

  const nextPageQuery = queryKeys(currentPage + 1);
  const prefetchNextPage = useQueryPrefetch(nextPageQuery, fetchUsers);

  const handleNextPage = () => {
    setCurrentPage((prevPage) => prevPage + 1);
    prefetchNextPage();
  };

  // ...
};

Avec les étapes ci-dessus, nous pouvons utiliser React Query pour implémenter facilement la pagination des données et optimiser les performances.

Résumé

Cet article présente les meilleures pratiques d'utilisation de React Query pour implémenter la pagination des données, et fournit également quelques exemples de code spécifiques. React Query fournit des fonctions de hook et des mécanismes de mise en cache pratiques, rendant la mise en œuvre de la pagination des données simple et efficace. En utilisant React Query, nous pouvons mieux gérer la récupération, la mise en cache et la mise à jour des données, tout en offrant une bonne expérience utilisateur et des performances applicatives.

J'espère que cet article vous a fourni des conseils et une aide précieux pour comprendre et utiliser React Query pour gérer la pagination des données.

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!