2023如何在 React Query 中实现数据的增、删、改、查？

如何在 React Query 中实现数据的增、删、改、查？

在现代 Web 开发中，前后端分离的架构方式得到了广泛应用。作为前端开发者，我们通常需要与后端进行数据交互，包括增加（Create）、删除（Delete）、更新（Update）和查询（Query）数据。为了简化这些操作，提高开发效率，React Query 库成为了一个流行的选择。本文将介绍如何使用 React Query 实现数据的增、删、改、查。

React Query 是一个状态管理库，它专注于管理异步数据。它提供了一套强大的工具和API，用于获取、更新和删除数据，以及自动管理数据的缓存和失效。

首先，我们需要安装并配置 React Query。可以使用以下命令安装 React Query：

npm install react-query

或者

yarn add react-query

然后，在你的应用程序的根组件中添加 React Query 的 Provider：

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

const queryClient = new QueryClient();

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

接下来，让我们看一下如何在 React Query 中实现数据的增删改查。

创建/新增数据

要创建新的数据，我们可以使用 useMutation hook。这个 hook 接收一个函数作为参数，用于发送请求并创建新的数据。这个函数必须返回 Promise，并在数据创建成功后进行 resolve。

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

在上面的代码中，我们使用了 useMutation hook 来创建一个名为 CreateData 的组件。mutate 函数用于触发请求并创建新的数据。在这个例子中，我们发送一个 POST 请求到 /api/data 地址，并将新的数据作为请求的正文。请求成功后，通过调用 res.json() 方法来解析响应，并在 Promise resolve 后返回数据。

删除数据

要删除数据，我们可以再次使用 useMutation hook，并发送一个 DELETE 请求。类似于创建数据的例子，我们需要传递一个删除的函数，并在函数返回结果为成功后 resolve。

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

在上面的代码中，我们定义了一个名为 DeleteData 的组件，并使用 useMutation hook 创建了一个删除函数。这个函数发送一个 DELETE 请求到 /api/data/{dataId} 地址，其中 {dataId} 是要删除的数据的唯一标识符。请求成功后，我们将结果作为 Promise resolve 返回。

更新数据

要更新数据，我们可以再次使用 useMutation hook，发送一个 PUT 或者 PATCH 请求。类似于创建数据和删除数据的例子，我们需要传递一个函数用于更新数据，并在函数返回结果为成功后 resolve。

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

在上面的代码中，我们创建了一个名为 UpdateData 的组件，并使用 useMutation hook 创建了一个更新函数。这个函数发送一个 PUT 请求到 /api/data/{dataId} 地址，并将更新的数据作为请求的正文。请求成功后，我们将结果作为 Promise resolve 返回。

查询数据

要查询数据，在 React Query 中我们可以使用 useQuery hook。这个 hook 接收一个函数作为参数，并返回一个包含数据的对象。在函数中，我们发送一个 GET 请求，并在响应中解析数据。

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

在上面的代码中，我们使用了 useQuery hook 创建了一个名为 GetData 的组件。useQuery hook 接收一个字符串作为标识符，并在请求成功后自动缓存数据。我们发送一个 GET 请求到 /api/data/{dataId} 地址，并在响应中解析数据。在数据加载中，我们展示一个 "Loading..." 的文本，如果出现错误，我们展示错误的文本，否则，我们展示查询到的数据。

综上所述，我们已经学习了如何使用 React Query 来实现数据的增、删、改、查。React Query 提供了许多强大的工具和 API，用于简化数据管理和交互。通过使用这些工具和 API，我们可以更容易地操作数据，提高前端开发的效率。希望本文能对你有所帮助！