React Query でデータ関連付けとユニオン クエリを実装するにはどうすればよいですか?

React Query でデータ関連付けとユニオン クエリを実装するにはどうすればよいですか?

最新のアプリケーションがますます複雑になるにつれて、データの関連付けと共同クエリが開発における一般的な要件になっています。 React開発では通常、React Queryを使用してデータの取得と管理を行います。 React Query は強力なクエリ機能を提供しており、データ相関と結合クエリを簡単に実装できます。この記事では、React Query でデータ相関とユニオン クエリを実装する方法を紹介し、いくつかの具体的なコード例を示します。

1. データ関連付け
   データ関連付けとは、複数の関連データを接続し、関連付けられたデータを通じてそれらのデータをクエリおよび表示することを指します。 React Query の相関関係は useQuery を使用して実行できます。以下は、ユーザーとそれに対応する注文データを関連付ける方法を示す簡単な例です。

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>
  );
}

上の例では、2 つの useQuery フックを使用してユーザー データと注文データをそれぞれ取得します。ユーザーデータが正常にロードされると、注文データがロードされ、ユーザーの ID に基づいてユーザーと注文データが関連付けられます。これにより、注文データがロードされたときにユーザー データがすでに利用可能であることが保証されます。

2. ユニオン クエリ
   ユニオン クエリとは、複数のソースからデータを取得し、それらを 1 つのデータ オブジェクトに結合することを指します。 React Query のユニオン クエリは useQueries を使用して実行できます。以下は、ユーザーとその対応する注文データを共同でクエリする方法を示す簡単な例です。

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>
  );
}

上の例では、useQueries フックを使用して 2 つのクエリを配列に結合しました。同時に、それぞれのクエリ キー (queryKey: 'users' および queryKey: 'orders') が保持されます。次に、クエリ結果をトラバースすることで、ユーザーと注文のデータを取得し、ユーザーの ID に基づいてユーザーと注文のデータを関連付けることができます。

概要
React Query は強力なクエリ機能を提供しており、データ関連付けや結合クエリを簡単に実装できます。データの関連付けでは、useQuery フックを使用して複数の関連データを関連付け、関連付けられたデータを通じてクエリと表示を行うことができます。結合クエリでは、useQueries フックを使用して複数のクエリを 1 つの配列に結合し、さまざまなソースからのデータを結合、フィルタリング、表示できます。

上記の例を通して、React Query は非常に柔軟で使いやすく、複雑なデータ クエリのニーズの処理に役立つことがわかります。この記事が、React 開発でのデータ相関とユニオン クエリの実装に役立つことを願っています。

以上がReact Query でデータ関連付けとユニオン クエリを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。