Bagaimana untuk melaksanakan pertanyaan selari berparti bagi pangkalan data dalam React Query?

Bagaimana untuk melaksanakan pertanyaan selari berparti bagi pangkalan data dalam React Query?

Ikhtisar:
React Query ialah perpustakaan untuk mengurus dan memproses data tak segerak. Ia menyediakan cara yang mudah dan berkuasa untuk mengendalikan pertanyaan data, caching dan penyegerakan. Dalam pembangunan, kami selalunya perlu melakukan pertanyaan pangkalan data, dan kadangkala pertanyaan ini mungkin mengambil masa yang lama. Untuk meningkatkan prestasi dan kelajuan tindak balas, kami boleh menggunakan pertanyaan selari terbahagi untuk mempercepatkan pemerolehan data.

Prinsip pertanyaan selari terbahagi adalah untuk membahagikan tugasan pertanyaan kompleks kepada berbilang subtugas dan melaksanakan subtugasan ini secara selari. Setiap subtugas melakukan pertanyaan data secara bebas dan mengembalikan keputusan Akhirnya, hasil ini digabungkan dan dikembalikan kepada pengguna.

Contoh kod khusus:
Berikut ialah contoh menggunakan React Query untuk melaksanakan pertanyaan selari pembahagian pangkalan data:

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

Dalam kod di atas, kami mula-mula mentakrifkan partitionArray fungsi untuk membahagikan tatasusunan, yang menggabungkan tatasusunan dan saiz Partition ialah diambil sebagai input dan membahagikan tatasusunan kepada berbilang partition. Seterusnya, kami mentakrifkan fungsi pertanyaan fetchUserInfo untuk mendapatkan maklumat pengguna Fungsi ini menerima ID pengguna sebagai parameter, menanyakan pangkalan data dan mengembalikan maklumat pengguna.

Kemudian, kami menentukan fungsi pertanyaan selari parallelQuery, yang menerima tatasusunan ID pengguna sebagai input, membahagikan ID pengguna kepada berbilang partition sub-tatasusunan dan mencipta tugas tak segerak untuk setiap partition, menggunakan useQuery of React Query untuk pemprosesan data Pertanyaan. Akhir sekali, kami menunggu semua tugas tak segerak selesai dan menggabungkan hasilnya.

Dalam UserList komponen, kami menggunakan fungsi parallelQuery untuk menanyakan data dan memberikan UI yang berbeza berdasarkan status pemuatan data. Jika data sedang dimuatkan, kami memaparkan "Memuatkan...", jika ralat berlaku, kami memaparkan mesej ralat, jika tidak, kami memberikan senarai pengguna berdasarkan hasil pertanyaan.

Melalui contoh kod di atas, kami boleh melaksanakan pertanyaan selari terbahagi bagi pangkalan data dalam React Query untuk meningkatkan prestasi dan kelajuan tindak balas pertanyaan data.

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