React Query でデータベースのバッチ操作を実装する方法

npm install react-query

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

const queryClient = new QueryClient();

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

export default App;

import axios from 'axios';

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

import { useQuery } from 'react-query';

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

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

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

import axios from 'axios';

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

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

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

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