React Query でデータを追加、削除、変更、クエリするにはどうすればよいですか?

npm install react-query

yarn add react-query

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

const queryClient = new QueryClient();

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

import { useMutation } from 'react-query';

function CreateData() {
  const { mutate, isLoading } = useMutation((data) =>
    fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    }).then((res) => res.json())
  );

  const handleCreate = () => {
    mutate({ name: 'New Data' }); // 传递新数据到 mutate 函数
  };

  return (
    <div>
      <button onClick={handleCreate} disabled={isLoading}>
        {isLoading ? 'Creating...' : 'Create Data'}
      </button>
    </div>
  );
}

import { useMutation } from 'react-query';

function DeleteData({ dataId }) {
  const { mutate, isLoading } = useMutation(() =>
    fetch(`/api/data/${dataId}`, {
      method: 'DELETE',
    }).then((res) => res.json())
  );

  const handleDelete = () => {
    mutate();
  };

  return (
    <div>
      <button onClick={handleDelete} disabled={isLoading}>
        {isLoading ? 'Deleting...' : 'Delete Data'}
      </button>
    </div>
  );
}

import { useMutation } from 'react-query';

function UpdateData({ dataId }) {
  const { mutate, isLoading } = useMutation((data) =>
    fetch(`/api/data/${dataId}`, {
      method: 'PUT',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
      },
    }).then((res) => res.json())
  );

  const handleUpdate = () => {
    mutate({ name: 'Updated Data' });
  };

  return (
    <div>
      <button onClick={handleUpdate} disabled={isLoading}>
        {isLoading ? 'Updating...' : 'Update Data'}
      </button>
    </div>
  );
}

import { useQuery } from 'react-query';

function GetData({ dataId }) {
  const { isLoading, error, data } = useQuery('data', () =>
    fetch(`/api/data/${dataId}`).then((res) => res.json())
  );

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

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

  return (
    <div>
      <h2>Data: {data.name}</h2>
    </div>
  );
}