How to return data from Tanstack React Query useMutation?

在使用Tanstack React Query的useMutation钩子时，我们可以处理异步请求，并且可以从mutation中获取返回的数据。useMutation钩子是专门用来处理那些可能会更改服务器上数据的操作，比如添加、更新或删除数据。

使用 useMutation

首先，你需要定义一个异步函数，这个函数负责执行实际的异步操作，比如网络请求。然后将这个函数传递给useMutation。

javascript
import { useMutation } from 'react-query';

const updateUser = async (userData) => {
  const response = await fetch('/update-user', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userData),
  });

  if (!response.ok) {
    throw new Error('Network response was not ok');
  }

  return response.json(); // 返回更新后的用户数据
};

function UserProfile({ userId }) {
  const { mutate, data, error, isSuccess, isError } = useMutation(updateUser);

  const handleSubmit = (userData) => {
    mutate(userData);
  };

  if (isSuccess && data) {
    console.log('用户更新成功:', data);
  }

  if (isError) {
    console.error('更新失败:', error);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        {/* 表单内容 */}
      </form>
      {isSuccess && <p>用户更新成功!</p>}
      {isError && <p>更新失败: {error.message}</p>}
    </div>
  );
}

重要的返回值

• mutate函数：这是一个触发异步mutation的函数。你可以通过传递需要的参数来调用它，这些参数会被传递给你的异步函数。
• data：这是异步函数成功完成后返回的数据。在上面的例子中，data将包含从服务器返回的更新后的用户信息。
• error：如果异步函数抛出错误或者请求失败，此处会包含错误信息。
• isSuccess：一个布尔值，表示mutation操作是否成功完成。
• isError：一个布尔值，表示在执行mutation操作时是否发生错误。

使用场景示例

假设你有一个用户配置文件组件，用户可以更新他们的信息。当用户提交表单时，你可以调用mutate函数，并传递新的用户数据。使用useMutation的好处是，你可以直接在组件中处理加载状态、成功状态和错误状态，使得用户体验更加流畅。

以上就是如何在React Query的useMutation中处理和返回数据的基本介绍。希望这能帮助你理解如何在实际项目中使用它。