如何在 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，我们可以更容易地操作数据，提高前端开发的效率。希望本文能对你有所帮助！
