React-query - What's the difference between useQuery and useMutation hook?

useQuery 和 useMutation 的区别

React Query 是一个强大的库，用于在 React 应用中处理数据的获取、缓存、同步和更新。在 React Query 中，useQuery 和 useMutation 是两个非常核心的钩子（hooks），它们处理数据的方式和目标有所不同。

useQuery

定义及用途： useQuery 主要用于异步获取数据，并将数据缓存在本地。当组件需要获取远程数据时，通常会使用 useQuery。它非常适合处理 GET 请求，来获取数据并展示。

特点：

• 自动缓存和更新数据。
• 提供数据状态管理，如 isLoading, isError, data 等。
• 支持数据的定时刷新和窗口聚焦刷新。

例子： 假设我们需要从一个 API 获取用户列表，我们可以这样使用 useQuery:

javascript
const { data, error, isLoading } = useQuery('users', fetchUsers);

这里 fetchUsers 是一个异步函数，用来发送 GET 请求获取用户数据。

useMutation

定义及用途： useMutation 用于执行修改数据的操作，如 POST, PUT, PATCH 或 DELETE 请求。这个 Hook 主要处理那些会对服务器数据造成更改的操作，并且这些操作通常不需要立即显示在 UI 上。

特点：

• 用于创建、更新或删除数据。
• 提供了 mutation 的状态管理，如 isLoading, isError, isSuccess。
• 支持回调函数，如 onSuccess, onError, onSettled，允许在操作完成后执行某些操作。

例子： 假设我们需要添加一个新用户，可以这样使用 useMutation:

javascript
const mutation = useMutation(addUser, {
    onSuccess: () => {
        // 例如，添加成功后重新获取用户列表
        queryClient.invalidateQueries('users')
    }
});

// 调用 mutation
mutation.mutate({name: "新用户", age: 30});

这里 addUser 是一个发送 POST 请求的函数，用来创建新用户。

总结

总的来说，useQuery 适用于获取并显示数据的场景，而 useMutation 适用于那些需要修改数据但不立即关心其显示的场景。使用这两个钩子能有效地管理数据状态和缓存，优化 React 应用的性能和用户体验。