How to show loading button during mutation in react query

在 React Query 中，执行 mutation（如添加、更新或删除数据）时，可以通过使用 useMutation 钩子来轻松地追踪和显示加载状态。useMutation 钩子返回一个包含多个属性和方法的对象，其中包括控制和获取 mutation 状态的工具。

如何使用 useMutation 来显示加载状态

1. 设置 Mutation: 首先，你需要定义一个 mutation 函数，这个函数执行实际的数据操作，比如 API 调用。

2. 使用 useMutation 钩子: 在你的组件中，通过传递上述的 mutation 函数到 useMutation，你将获得一个 mutation 对象，该对象包含了控制 mutation 的方法和状态。

3. 获取和使用 isLoading 状态: useMutation 返回的对象中有一个 isLoading 属性，该属性在 mutation 执行期间为 true，完成后变为 false。你可以使用这个属性在 UI 中显示加载指示器。

示例代码

假设我们有一个添加用户的 API 函数，我们可以这样使用 useMutation 来添加用户并显示加载状态：

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

function addUser(userData) {
  return fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(userData),
    headers: {
      'Content-Type': 'application/json',
    },
  }).then(res => res.json());
}

function CreateUserComponent() {
  const { mutate, isLoading } = useMutation(addUser);

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

  return (
    <div>
      <button onClick={() => handleAddUser({ name: 'John Doe' })}>
        Add User
      </button>
      {isLoading && <p>Loading...</p>}
    </div>
  );
}

在这个例子中：

• 我们定义了一个 addUser 函数，它负责发送 POST 请求到服务器。
• 在组件中，我们使用 useMutation 并传入 addUser 函数。
• 使用解构得到 mutate 和 isLoading。
• 当按钮被点击时，handleAddUser 被调用，执行 mutate 方法触发 mutation。
• 根据 isLoading 的值，我们在 UI 中显示一个加载信息。

通过这种方法，你可以在执行异步操作时给用户明确的反馈，改善用户体验。