Bagaimana untuk melaksanakan perkaitan data dan pertanyaan kesatuan dalam React Query?

Bagaimana untuk melaksanakan perkaitan data dan pertanyaan kesatuan dalam React Query?

Apabila aplikasi moden menjadi semakin kompleks, perkaitan data dan pertanyaan bersama telah menjadi keperluan biasa dalam pembangunan. Dalam pembangunan React, kami biasanya menggunakan React Query untuk mengendalikan pemerolehan dan pengurusan data. React Query menyediakan fungsi pertanyaan yang berkuasa, membolehkan kami melaksanakan korelasi data dan pertanyaan bersama dengan mudah. Artikel ini akan memperkenalkan cara melaksanakan korelasi data dan pertanyaan kesatuan dalam React Query dan menyediakan beberapa contoh kod khusus.

1. Perkaitan data
   Perkaitan data merujuk kepada menyambungkan berbilang data yang berkaitan dan membuat pertanyaan serta memaparkannya melalui data yang berkaitan. Korelasi dalam React Query boleh dilakukan menggunakan useQuery. Berikut ialah contoh mudah yang menunjukkan cara mengaitkan pengguna dan data pesanan mereka yang sepadan:

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

Dalam contoh di atas, kami menggunakan dua cangkuk useQuery untuk mendapatkan data pengguna dan pesanan masing-masing. Apabila data pengguna berjaya dimuatkan, data pesanan akan dimuatkan dan data pengguna dan pesanan akan dikaitkan berdasarkan ID pengguna. Ini memastikan data pengguna sudah tersedia apabila data pesanan dimuatkan.

2. Union Query
   Union query merujuk kepada mendapatkan data daripada berbilang sumber dan menggabungkannya menjadi satu objek data. Pertanyaan kesatuan dalam React Query boleh dicapai menggunakan useQueries. Berikut ialah contoh mudah yang menunjukkan cara untuk bersama-sama bertanya kepada pengguna dan data pesanan mereka yang sepadan:

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

Dalam contoh di atas, kami menggunakan cangkuk useQueries untuk menggabungkan dua pertanyaan ke dalam satu tatasusunan sambil mengekalkan kunci pertanyaan masing-masing(queryKey: ' pengguna dan queryKey: 'pesanan'). Kemudian dengan merentasi hasil pertanyaan, kami boleh mendapatkan pengguna dan data pesanan, dan mengaitkan pengguna dan data pesanan berdasarkan ID pengguna.

Ringkasan
React Query menyediakan fungsi pertanyaan yang berkuasa, membolehkan kami melaksanakan korelasi data dan pertanyaan bersama dengan mudah. Dalam perkaitan data, kita boleh menggunakan cangkuk useQuery untuk mengaitkan berbilang data berkaitan, dan pertanyaan serta paparan melalui data yang berkaitan. Dalam pertanyaan bersama, kita boleh menggunakan cangkuk useQueries untuk menggabungkan berbilang pertanyaan ke dalam tatasusunan dan menyertai, menapis dan memaparkan data daripada sumber yang berbeza.

Melalui contoh di atas, kami dapat melihat bahawa React Query agak fleksibel dan mudah digunakan, membantu kami mengendalikan keperluan pertanyaan data yang kompleks. Saya harap artikel ini telah membantu anda melaksanakan korelasi data dan pertanyaan kesatuan dalam pembangunan React.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan perkaitan data dan pertanyaan kesatuan dalam React Query?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!