React Query 如何在发起请求时携带参数？

在React Query中，当我们需要发起一个请求并携带参数时，通常会用到useQuery或者useMutation这两个hooks。下面我将详细说明如何在这两种情况下携带参数。

使用 useQuery

在useQuery中，参数可以通过query函数的参数进行传递。通常这个query函数是你自己定义的，用于从服务器获取数据。

例如，假设我们要从一个API获取一些用户数据，API端点接受userId作为参数来获取特定用户的信息:

javascript
import { useQuery } from 'react-query';
import axios from 'axios';

// 定义一个获取用户数据的函数，它接受一个userId参数
const fetchUserById = async (userId) => {
  const { data } = await axios.get(`/api/users/${userId}`);
  return data;
};

// 在组件中使用useQuery，传入userId参数
function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery(['user', userId], () => fetchUserById(userId));

  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;

  // 呈现用户数据...
}

注意，在上面的例子中，useQuery的第一个参数是一个数组，其中包含了一个字符串'user'和变量userId。这个数组被称作query key，在React Query中用于唯一标识和缓存这个query。

使用 useMutation

useMutation通常用于执行诸如POST、PUT、DELETE等会改变服务器状态的操作。参数通常是在触发mutation时传递的。

举个例子，如果我们想要添加一个新的用户，我们可能会有一个useMutation来处理这个POST请求:

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

// 定义一个添加用户的函数，它接受一个user对象作为参数
const addUser = async (user) => {
  const { data } = await axios.post('/api/users', user);
  return data;
};

function CreateUserForm() {
  // 使用useMutation
  const mutation = useMutation(addUser);

  const handleSubmit = async (event) => {
    event.preventDefault();
    const user = {
      name: 'New User',
      email: 'newuser@example.com',
    };

    // 调用mutation，传入user作为参数
    mutation.mutate(user);
  };

  // 根据mutation的状态呈现不同的UI
  if (mutation.isLoading) {
    return 'Adding user...';
  }

  if (mutation.isError) {
    return `An error occurred: ${mutation.error.message}`;
  }

  if (mutation.isSuccess) {
    return 'User added!';
  }

  // 呈现表单...
}

在上面的例子中，我们定义了一个handleSubmit函数，在用户提交表单时触发。这个函数通过mutation.mutate(user)调用addUser函数，并将用户对象作为参数传递给它。React Query会处理请求的发送以及状态的更新（如 isLoading, isError 和 isSuccess）。

总的来说，无论是useQuery还是useMutation，React Query都提供了非常灵活的方式来携带请求参数，并且它会处理很多与请求状态管理相关的复杂性。