Bagaimana untuk melaksanakan operasi kumpulan pangkalan data dalam React Query

Dalam React Query, kami selalunya perlu melakukan operasi kelompok dengan pangkalan data bahagian belakang. Artikel ini akan memperkenalkan cara melaksanakan operasi kelompok pada pangkalan data dalam React Query dan menunjukkannya melalui contoh kod tertentu.

React Query ialah perpustakaan untuk mengurus keadaan data dan mengendalikan permintaan data. Ia membantu pembangun mengendalikan interaksi dengan pangkalan data bahagian belakang dengan mudah dan menyediakan pelbagai ciri berkuasa.

Pertama, kita perlu memasang dan menyediakan React Query. Ia boleh dipasang dengan arahan berikut:

npm install react-query

Kemudian, kita perlu menyediakan React Query dalam fail kemasukan aplikasi. Kod berikut boleh digunakan:

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用程序的其他组件和逻辑 */}
    </QueryClientProvider>
  );
}

export default App;

Seterusnya, kami akan melaksanakan operasi kelompok pada pangkalan data. Katakan kita mempunyai fungsi pengurusan pengguna yang perlu memadam pengguna terpilih dalam kelompok. Kita boleh melakukannya dengan mengikuti langkah berikut:

1. Buat fungsi permintaan untuk mendapatkan senarai pengguna. Ia boleh ditakrifkan menggunakan kod berikut:

import axios from 'axios';

const getUsers = async () => {
  const response = await axios.get('/api/users');
  return response.data;
};

2. Gunakan cangkuk useQuery React Query untuk mendapatkan data senarai pengguna. Ini boleh dicapai menggunakan kod berikut:

import { useQuery } from 'react-query';

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

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

  // 渲染用户列表的逻辑
};

3. Buat fungsi permintaan untuk memadam pengguna. Ia boleh ditakrifkan menggunakan kod berikut:

import axios from 'axios';

const deleteUser = async (id) => {
  await axios.delete(`/api/users/${id}`);
};

4. Gunakan cangkuk useMutation React Query untuk mengendalikan pemadaman pengguna. Ini boleh dicapai menggunakan kod berikut:

import { useMutation, useQueryClient } from 'react-query';

const UserList = () => {
  // 其他代码...

  const queryClient = useQueryClient();

  const deleteMutation = useMutation(deleteUser, {
    onSuccess: () => {
      queryClient.invalidateQueries('users');
    },
  });

  const handleDelete = (id) => {
    deleteMutation.mutate(id);
  };

  // 渲染用户列表的逻辑
};

Dalam kod di atas, kami menggunakan cangkuk useQueryClient untuk mendapatkan contoh QueryClient dan memanggil kaedah invalidateQueries untuk membatalkan data senarai pengguna supaya kami boleh mendapatkan semula yang terkini. senaraikan data selepas memadamkan pengguna.

Akhir sekali, kami memberikan butang padam dalam senarai pengguna dan mengaitkannya dengan fungsi handleDelete. Ini boleh dicapai menggunakan kod berikut:

import { useMutation, useQueryClient } from 'react-query';

const UserList = () => {
  // 其他代码...

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>
          {user.name}{' '}
          <button onClick={() => handleDelete(user.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
};

Melalui langkah di atas, kami berjaya melaksanakan operasi kelompok pada pangkalan data, khususnya memadamkan pengguna. Apabila butang padam diklik, fungsi handleDelete akan dipanggil untuk mencetuskan operasi pemadaman dan mengemas kini data senarai pengguna secara automatik.

Untuk meringkaskan, React Query menyediakan alatan yang mudah digunakan dan berkuasa untuk mengendalikan operasi kelompok dengan pangkalan data bahagian belakang. Dengan menggunakan cangkuk useMutation untuk mengendalikan fungsi permintaan dan panggil balik selepas operasi berjaya, kami boleh melaksanakan pelbagai operasi pangkalan data dengan mudah. Kod dalam contoh di atas hanya untuk rujukan Dalam pembangunan sebenar, ia mungkin perlu diselaraskan dan dikembangkan mengikut keperluan tertentu. Saya harap artikel ini dapat membantu anda lebih memahami dan menggunakan kaedah operasi kumpulan pangkalan data dalam React Query.

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