Comment implémenter l'association de données et la requête d'union dans React Query ?

Comment implémenter l'association de données et la requête d'union dans React Query ?

À mesure que les applications modernes deviennent de plus en plus complexes, l'association de données et les requêtes conjointes sont devenues des exigences courantes en matière de développement. Dans le développement de React, nous utilisons généralement React Query pour gérer l'acquisition et la gestion des données. React Query fournit des fonctions de requête puissantes, nous permettant de mettre en œuvre facilement une corrélation de données et des requêtes conjointes. Cet article expliquera comment implémenter la corrélation de données et la requête d'union dans React Query, et fournira quelques exemples de code spécifiques.

1. Association de données
   L'association de données fait référence à la connexion de plusieurs données associées, à leur interrogation et à leur affichage via les données associées. La corrélation dans React Query peut être effectuée à l'aide de useQuery. Voici un exemple simple qui montre comment associer les utilisateurs et leurs données de commande correspondantes :

import { useQuery } from 'react-query';

function UserOrders({ userId }) {
  const userQuery = useQuery('user', () => fetchUser(userId));
  
  // 在用户数据加载成功后，获取到用户的订单数据
  const orderQuery = useQuery(['orders', userId], () => fetchOrders(userId), {
    enabled: !!userQuery.data,
  });
  
  if (userQuery.isLoading) {
    return <div>Loading user...</div>;
  }
  
  if (userQuery.error) {
    return <div>Error: {userQuery.error.message}</div>;
  }
  
  return (
    <div>
      <h1>User: {userQuery.data.name}</h1>
      {orderQuery.isLoading ? (
        <div>Loading orders...</div>
      ) : orderQuery.error ? (
        <div>Error: {orderQuery.error.message}</div>
      ) : (
        <ul>
          {orderQuery.data.map((order) => (
            <li key={order.id}>
              Order #{order.id}: {order.product}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Dans l'exemple ci-dessus, nous avons utilisé deux hooks useQuery pour obtenir respectivement les données d'utilisateur et de commande. Lorsque les données utilisateur sont chargées avec succès, les données de commande seront chargées et les données utilisateur et de commande seront associées en fonction de l'ID de l'utilisateur. Cela garantit que les données utilisateur sont déjà disponibles lorsque les données de commande sont chargées.

2. Union Query
   La requête Union fait référence à l'obtention de données à partir de plusieurs sources et à leur fusion en un seul objet de données. Les requêtes d'union dans React Query peuvent être réalisées à l'aide de useQueries. Voici un exemple simple qui montre comment interroger conjointement les utilisateurs et leurs données de commande correspondantes :

import { useQueries } from 'react-query';

function UsersAndOrders() {
  const usersQuery = useQueries([
    { queryKey: 'users', queryFn: fetchUsers },
    { queryKey: 'orders', queryFn: fetchOrders },
  ]);
  
  if (usersQuery.some((query) => query.isLoading)) {
    return <div>Loading users and orders...</div>;
  }
  
  if (usersQuery.some((query) => query.error)) {
    return <div>Error loading users and orders</div>;
  }
  
  const users = usersQuery.find((query) => query.queryKey === 'users').data;
  const orders = usersQuery.find((query) => query.queryKey === 'orders').data;
  
  return (
    <div>
      <h1>Users and Orders</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            User: {user.name}
            <ul>
              {orders
                .filter((order) => order.userId === user.id)
                .map((order) => (
                  <li key={order.id}>
                    Order #{order.id}: {order.product}
                  </li>
                ))}
            </ul>
          </li>
        ))}
      </ul>
    </div>
  );
}

Dans l'exemple ci-dessus, nous avons utilisé le hook useQueries pour fusionner les deux requêtes en un seul tableau tout en conservant leurs clés de requêtes respectives (queryKey : ' utilisateurs' et queryKey: 'commandes'). Ensuite, en parcourant les résultats de la requête, nous pouvons obtenir les données d'utilisateur et de commande, et associer les données d'utilisateur et de commande en fonction de l'ID de l'utilisateur.

Résumé
React Query fournit des fonctions de requête puissantes, nous permettant de mettre en œuvre facilement une corrélation de données et des requêtes conjointes. Dans l'association de données, nous pouvons utiliser le hook useQuery pour associer plusieurs données associées, ainsi qu'interroger et afficher les données associées. Dans les requêtes conjointes, nous pouvons utiliser le hook useQueries pour combiner plusieurs requêtes dans un tableau et joindre, filtrer et afficher des données provenant de différentes sources.

Grâce aux exemples ci-dessus, nous pouvons voir que React Query est assez flexible et facile à utiliser, ce qui nous aide à gérer des besoins complexes en matière de requêtes de données. J'espère que cet article vous a aidé à implémenter la corrélation de données et les requêtes syndicales dans le développement de React.

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!