Panduan Penyepaduan Pangkalan Data Pertanyaan React: Tutorial Mula Pantas

Panduan Penyepaduan Pangkalan Data Pertanyaan React: Tutorial Mula Pantas

Pengenalan:
React Query ialah perpustakaan pertanyaan data yang berkuasa yang menyediakan cara mudah dan cekap untuk mengurus dan membuat pertanyaan data aplikasi. Konsep reka bentuknya adalah berdasarkan Hooks, menjadikannya sangat mudah untuk menggunakannya dalam aplikasi React. Dalam panduan ini, kami akan menumpukan pada penyepaduan React Query dengan pangkalan data untuk mendayakan pertanyaan pantas dan mengemas kini data.

1. Pasang dan sediakan React Query
Pertama, kita perlu memasang React Query. Buka terminal dan jalankan arahan berikut dalam direktori projek anda:

npm install react-query

Selepas pemasangan selesai, kami perlu menyediakan pembekal untuk React Query dalam komponen akar aplikasi. Dalam komponen akar anda, tambahkan kod berikut:

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

const queryClient = new QueryClient();

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

Kini apl React anda telah disepadukan React Query!

2. Cipta lapisan penyepaduan pangkalan data
Seterusnya, kami akan buat lapisan penyepaduan pangkalan data untuk menguruskan operasi data kami. Kami akan menggunakan API pangkalan data hipotesis untuk contoh kami. Dalam projek anda, cipta fail bernama api.js dan tambah kod berikut: api.js 的文件，并添加以下代码：

export async function fetchUsers() {
  // 发送请求获取用户数据
}

export async function deleteUser(id) {
  // 发送请求删除指定 id 的用户
}

export async function updateUser(id, data) {
  // 发送请求更新指定 id 的用户数据
}

export async function createUser(data) {
  // 发送请求创建新用户
}

在这个文件中，我们分别定义了获取用户、删除用户、更新用户和创建用户的函数。根据你的实际情况，你可能需要调整这些函数的实现细节。

三、使用 React Query 进行数据查询
现在我们可以开始使用 React Query 进行数据查询了。在你的组件中，导入所需的 Hooks，并使用它们来查询数据。以下是一个查询用户列表的示例：

import { useQuery } from 'react-query';

import { fetchUsers } from './api';

function UserList() {
  const { data, isLoading, isError } = useQuery('users', fetchUsers);

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

  if (isError) {
    return <div>Error occurred while fetching data.</div>;
  }

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

在这个示例中，我们使用 useQuery Hook 来查询用户数据。第一个参数是一个字符串，用于标识查询的键值。第二个参数是一个函数，在其中调用我们之前定义的 fetchUsers 函数来获取用户数据。useQuery Hook 将返回一个包含查询结果的对象，我们可以从中获取数据、加载状态和错误状态。

四、使用 React Query 进行数据更新
除了查询数据，React Query 还提供了用于更新数据的 Hook。在你的组件中，导入 useMutation Hook 并使用它来更新用户数据。以下是一个更新用户的示例：

import { useMutation } from 'react-query';

import { updateUser } from './api';

function UserForm({ user }) {
  const mutation = useMutation((data) => updateUser(user.id, data));

  const handleSubmit = (event) => {
    event.preventDefault();

    const formData = new FormData(event.target);
    const userData = Object.fromEntries(formData.entries());

    mutation.mutate(userData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" defaultValue={user.name} />
      <input type="text" name="email" defaultValue={user.email} />
      <button type="submit" disabled={mutation.isLoading}>
        {mutation.isLoading ? 'Saving...' : 'Save'}
      </button>
    </form>
  );
}

在这个示例中，我们使用 useMutation Hook 来进行用户数据的更新。我们将 updateUser 函数传递给 useMutation，它将返回一个包含 mutate 函数的对象。我们在表单提交时调用 mutation.mutaterrreee

Dalam fail ini, kami mentakrifkan masing-masing Dapatkan Pengguna, Padam Pengguna, Kemas Kini Pengguna dan Cipta Pengguna. Bergantung pada situasi sebenar anda, anda mungkin perlu melaraskan butiran pelaksanaan fungsi ini.

3 Gunakan React Query untuk pertanyaan data

Kini kita boleh mula menggunakan React Query untuk pertanyaan data. Dalam komponen anda, import Cangkuk yang diperlukan dan gunakannya untuk menanyakan data. Berikut ialah contoh pertanyaan senarai pengguna: 🎜rrreee🎜Dalam contoh ini, kami menggunakan useQuery Hook untuk menanyakan data pengguna. Parameter pertama ialah rentetan yang mengenal pasti nilai kunci pertanyaan. Parameter kedua ialah fungsi di mana kami memanggil fungsi fetchUsers yang kami takrifkan sebelum ini untuk mendapatkan data pengguna. Cangkuk useQuery akan mengembalikan objek yang mengandungi hasil pertanyaan yang daripadanya kita boleh mendapatkan data, status pemuatan dan status ralat. 🎜🎜4. Gunakan React Query untuk kemas kini data🎜Selain pertanyaan data, React Query juga menyediakan Cangkuk untuk mengemas kini data. Dalam komponen anda, import Cangkuk useMutation dan gunakannya untuk mengemas kini data pengguna. Berikut ialah contoh mengemas kini pengguna: 🎜rrreee🎜Dalam contoh ini, kami menggunakan useMutation Hook untuk mengemas kini data pengguna. Kami menghantar fungsi updateUser kepada useMutation dan ia akan mengembalikan objek yang mengandungi fungsi mutate. Kami memanggil fungsi mutation.mutate apabila borang diserahkan, menghantar data borang kepadanya sebagai parameter, dengan itu mencetuskan kemas kini data. 🎜🎜Kesimpulan: 🎜Panduan ini memperkenalkan cara mengintegrasikan React Query dan pangkalan data dalam aplikasi React untuk mencapai pertanyaan dan kemas kini data yang pantas. Dengan mengikut langkah di atas, anda boleh mula memanfaatkan React Query dengan mudah untuk pengurusan data. Harap artikel ini membantu anda! 🎜

Atas ialah kandungan terperinci Panduan Penyepaduan Pangkalan Data Pertanyaan React: Tutorial Mula Pantas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!