Comment implémenter une requête parallèle partitionnée de base de données dans React Query ?

Comment implémenter une requête parallèle partitionnée de base de données dans React Query ?

Présentation :
React Query est une bibliothèque de gestion et de traitement des données asynchrones. Elle fournit un moyen simple et puissant de gérer les requêtes, la mise en cache et la synchronisation des données. En développement, nous devons souvent effectuer des requêtes de base de données, et parfois ces requêtes peuvent prendre beaucoup de temps. Afin d'améliorer les performances et la vitesse de réponse, nous pouvons utiliser des requêtes parallèles partitionnées pour accélérer l'acquisition de données.

Le principe de la requête parallèle partitionnée est de diviser une tâche de requête complexe en plusieurs sous-tâches et d'exécuter ces sous-tâches en parallèle. Chaque sous-tâche effectue une requête de données indépendamment et renvoie des résultats. Enfin, ces résultats sont combinés et renvoyés à l'utilisateur.

Exemples de code spécifiques : 
Ce qui suit est un exemple d'utilisation de React Query pour implémenter une requête parallèle de partitionnement de base de données :

import { useQuery } from 'react-query';

// 定义一个分区函数，用于将任务分成多个子任务
function partitionArray(array, partitionSize) {
   const partitions = [];
   for (let i = 0; i < array.length; i += partitionSize) {
      partitions.push(array.slice(i, i + partitionSize));
   }
   return partitions;
}

// 定义一个获取用户信息的查询函数
async function fetchUserInfo(userId) {
   const response = await fetch(`api/users/${userId}`);
   const data = await response.json();
   return data;
}

// 定义一个并行查询的函数
async function parallelQuery(userIds) {
   // 将待查询的用户 ID 分成多个分区
   const partitions = partitionArray(userIds, 5);
   const promises = partitions.map(partition => {
      // 对每个分区创建一个异步任务，使用 useQuery 进行数据查询
      return useQuery(['userInfo', partition], () => {
         return Promise.all(partition.map(fetchUserInfo));
      });
   });
   // 等待所有异步任务完成，并合并结果
   const results = await Promise.all(promises);
   const mergedResult = results.reduce((acc, result) => {
      return [...acc, ...result];
   }, []);
   return mergedResult;
}

// 在组件中使用并行查询
function UserList() {
   const userIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   const { data, isLoading, isError } = parallelQuery(userIds);

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

   if (isError) {
      return <div>Error occurred while fetching user information.</div>;
   }

   return (
      <div>
         {data.map(user => (
            <div key={user.id}>
               <h2>{user.name}</h2>
               <p>{user.email}</p>
            </div>
         ))}
      </div>
   );
}

Dans le code ci-dessus, nous définissons d'abord une fonction partitionArray pour partitionner un tableau, qui combine un tableau et la taille de la partition est pris en entrée et divise le tableau en plusieurs partitions. Ensuite, nous définissons une fonction de requête fetchUserInfo pour obtenir des informations sur l'utilisateur. Cette fonction accepte un identifiant utilisateur comme paramètre, interroge la base de données et renvoie les informations sur l'utilisateur.

Ensuite, nous avons défini une fonction de requête parallèle parallelQuery, qui accepte un tableau d'ID utilisateur en entrée, divise les ID utilisateur en plusieurs partitions de sous-tableaux et crée une tâche asynchrone pour chaque partition, en utilisant useQuery de React Query pour le traitement des données. Requête. Enfin, nous attendons que toutes les tâches asynchrones soient terminées et fusionnons les résultats.

Dans le composant UserList, nous utilisons la fonction parallelQuery pour interroger les données et afficher différentes interfaces utilisateur en fonction de l'état de chargement des données. Si les données sont en cours de chargement, nous affichons "Chargement...", si une erreur se produit, nous affichons un message d'erreur, sinon nous restituons la liste des utilisateurs en fonction des résultats de la requête.

Grâce aux exemples de code ci-dessus, nous pouvons implémenter des requêtes parallèles partitionnées de la base de données dans React Query pour améliorer les performances et la vitesse de réponse des requêtes de 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!