React Query 如何在按钮点击事件中触发请求？

React Query 是一个强大的数据同步库，允许开发人员有效地获取、缓存和更新数据。在 React Query 中，通常我们会使用 useQuery 钩子来进行数据的自动获取和监听，或者使用 useMutation 钩子来执行诸如POST、PUT、PATCH等会改变服务器状态的请求操作。但是，有时候我们需要在特定用户交互下才触发请求，比如说，在按钮点击事件中。

为了在按钮点击事件中触发请求，通常我们会用到 React Query 的 useMutation 钩子。这个钩子函数能够让我们定义一个触发异步请求的函数，并在这个请求成功、失败或者出错时执行回调函数。

下面是一个例子，假设我们有一个通过 API 创建新用户的功能，并且我们想要在按钮点击时触发这个创建用户的请求：

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

// 这个函数负责向服务器发送请求
const createUser = async (userData) => {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userData),
  });

  if (!response.ok) {
    throw new Error('Error creating user');
  }

  return response.json();
};

function MyComponent() {
  // 使用 useMutation 钩子定义 mutation，并提供 createUser 函数
  const mutation = useMutation(createUser, {
    onSuccess: (data) => {
      // 请求成功时的回调函数
      console.log('User created!', data);
    },
    onError: (error) => {
      // 请求失败时的回调函数
      console.error('Error creating user', error);
    },
  });

  // 这个函数会在按钮点击时调用
  const handleCreateUserClick = () => {
    // 假设 newUser 是我们需要提交的新用户信息
    const newUser = { name: 'Jane Doe', email: 'jane.doe@example.com' };

    // 调用 mutation.mutate 来触发请求
    mutation.mutate(newUser);
  };

  return (
    <div>
      <button onClick={handleCreateUserClick}>Create User</button>
      {mutation.isLoading && <span>Creating user...</span>}
      {mutation.isError && <span>An error occurred: {mutation.error.message}</span>}
      {mutation.isSuccess && <span>User created successfully!</span>}
    </div>
  );
}

在这个例子中，我们首先定义了一个 createUser 的异步函数，它接收新用户的数据并通过 POST 请求发送给服务器。然后，在我们的组件中，我们通过 useMutation 钩子创建了一个 mutation 对象，并传递了 createUser 函数和一些回调函数。我们在按钮的点击事件处理函数 handleCreateUserClick 中，通过 mutation.mutate 方法触发了创建用户的请求。

mutation 对象还提供了一些状态标志和数据，我们可以用它们来给用户显示请求的状态，比如是否正在加载（isLoading）、是否发生了错误（isError）、是否成功（isSuccess），以及错误本身（error）。这样，我们可以在 UI 中提供适当的反馈。