Bagaimana untuk melaksanakan pertanyaan pangkalan data teragih dalam React Query?-tutorial js-php.cn

Bagaimana untuk melaksanakan pertanyaan pangkalan data teragih dalam React Query?

王林

Lepaskan： 2023-09-26 10:40:57

asal

1160 orang telah melayarinya

如何在 React Query 中实现分布式数据库的查询？

Bagaimana untuk melaksanakan pertanyaan pangkalan data teragih dalam React Query?

Apabila aplikasi berkembang dalam kerumitan, pengurusan data menjadi semakin sukar. Pangkalan data teragih menjadi satu cara untuk menyelesaikan masalah ini. React Query ialah perpustakaan pengurusan data yang berkuasa yang membantu kami mengendalikan pertanyaan data dan caching dengan cekap.

Artikel ini akan memperkenalkan cara menggunakan React Query untuk melaksanakan pertanyaan pangkalan data yang diedarkan dan memberikan contoh kod khusus.

Mula-mula, kita perlu memasang perpustakaan React Query:

npm install react-query

Salin selepas log masuk

Seterusnya, kita boleh menetapkan Provider of React Query dalam komponen root aplikasi:

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用组件 */}
    </QueryClientProvider>
  );
}

Salin selepas log masuk

Sebelum menggunakan React Query untuk pertanyaan data, kita perlu mentakrifkan kaedah untuk mendapatkan fungsi API Data. Katakan kita mempunyai fungsi API bernama getUsers untuk mendapatkan senarai pengguna: getUsers的API函数用于获取用户列表：

async function getUsers() {
  const response = await fetch('/api/users');
  const data = await response.json();
  return data;
}

Salin selepas log masuk

接下来，我们可以使用React Query的useQuery钩子来进行数据查询：

import { useQuery } from 'react-query';

function UserList() {
  const { data, isLoading, error } = useQuery('users', getUsers);

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

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Salin selepas log masuk

在上述示例中，useQuery钩子使用了一个唯一的字符串users作为查询的关键字，并传入了之前定义的getUsers函数。React Query会自动缓存数据，并在需要时进行更新。

如果我们需要对查询结果进行排序或过滤，我们可以使用React Query的查询键参数。例如，如果我们需要根据用户名进行排序，我们可以将查询键设置为users?sortBy=name：

function UserList() {
  const { data, isLoading, error } = useQuery('users?sortBy=name', getUsers);
  // ...
}

Salin selepas log masuk

然后，我们可以使用React Query的useMutation钩子来执行数据更改操作。假设我们有一个名为updateUser的API函数用于更新用户信息：

async function updateUser(userId, userData) {
  const response = await fetch(`/api/users/${userId}`, {
    method: 'PUT',
    body: JSON.stringify(userData)
  });
  const data = await response.json();
  return data;
}

function UserDetail({ userId }) {
  const { data, isLoading, error } = useQuery(['user', userId], () => getUsers(userId));
  const mutation = useMutation(updatedData => updateUser(userId, updatedData));

  const handleUpdate = async () => {
    const updatedData = { name: 'New Name' };
    await mutation.mutateAsync(updatedData);
  };

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

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <p>Name: {data.name}</p>
      <button onClick={handleUpdate}>Update Name</button>
    </div>
  );
}

Salin selepas log masuk

在上述示例中，我们使用了['user', userId]作为查询键，并使用getUsers(userId)来获取特定用户的数据。然后，我们使用useMutation钩子创建了一个名为mutation的对象，其中包含一个用于异步更新用户数据的mutateAsyncrrreee

Seterusnya, kita boleh menggunakan cangkuk useQuery React Query untuk melaksanakan pertanyaan data:

rrreee

Dalam contoh di atas, cangkuk useQuery menggunakan rentetan unik users sebagai kata kunci pertanyaan dan meneruskan fungsi getUsers code> yang ditakrifkan sebelum ini. React Query menyimpan data secara automatik dan mengemas kininya apabila diperlukan.

Jika kita perlu mengisih atau menapis hasil pertanyaan, kita boleh menggunakan parameter kunci pertanyaan bagi React Query. Contohnya, jika kita perlu mengisih berdasarkan nama pengguna, kita boleh menetapkan kunci pertanyaan kepada users?sortBy=name:

rrreee

Kemudian, kita boleh menggunakan useMutation React Query. Cangkuk untuk melaksanakan operasi menukar data. Katakan kita mempunyai fungsi API bernama updateUser untuk mengemas kini maklumat pengguna: 🎜rrreee🎜Dalam contoh di atas, kami menggunakan ['user', userId] sebagai kunci pertanyaan, dan gunakan getUsers(userId) untuk mendapatkan data bagi pengguna tertentu. Kami kemudian menggunakan cangkuk useMutation untuk mencipta objek bernama mutation, yang mengandungi kaedah mutateAsync untuk mengemas kini data pengguna secara tidak segerak. 🎜🎜Akhir sekali, kami memaparkan nama pengguna dalam komponen dan mencetuskan operasi kemas kini data dengan mengklik butang. 🎜🎜Melalui contoh di atas, kita dapat melihat bahawa React Query menyediakan cara yang ringkas dan fleksibel untuk mengendalikan pertanyaan pangkalan data yang diedarkan. Sama ada operasi pemerolehan data, pengisihan, penapisan atau kemas kini data yang mudah, React Query boleh menggunakan fungsi yang berkuasa. 🎜🎜Sudah tentu, contoh di atas hanyalah penggunaan asas React Query, dan anda boleh menyesuaikan dan melanjutkannya mengikut keperluan khusus anda. Saya harap artikel ini dapat membantu anda menggunakan React Query untuk melaksanakan pertanyaan pangkalan data yang diedarkan dalam React! 🎜

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