React Query 如何传递参数？

在使用 React Query 进行数据获取时，传递参数给查询是一个非常常见的需求，这可以使我们根据不同的参数来获取不同的数据。React Query 提供了多种方式来传递参数到查询函数中，下面我将详细解释几种常用的方法，并且举例说明。

1. 直接传递参数

在使用 useQuery 或 useInfiniteQuery 等钩子时，你可以直接将参数作为第二个参数传递给查询函数。例如，如果我们需要基于用户 ID 获取用户数据，我们可以这样做：

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

function fetchUserById(userId) {
  return fetch(`https://api.example.com/users/${userId}`).then(res => res.json());
}

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;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
}

在这个例子中，userId 是作为参数直接传递给 fetchUserById 函数的。

2. 使用查询键

查询键（query key）在 React Query 中不仅用于缓存和更新的标识符，还可以作为参数传递给查询函数。查询键可以是一个数组，其中包含多个值，这些值会按顺序作为参数传递给查询函数。例如：

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

function fetchUserById(userId) {
  return fetch(`https://api.example.com/users/${userId}`).then(res => res.json());
}

function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery(['user', userId], fetchUserById);

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

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
}

这里，fetchUserById 函数直接使用了来自查询键的 userId。

3. 查询函数的工厂

当你需要更复杂的参数传递逻辑时，可以使用一个查询函数工厂。这是一个返回查询函数的函数，它可以根据你提供的参数来定制查询函数。例如：

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

function fetchUser({ queryKey }) {
  const [, userId, includePosts] = queryKey;
  let url = `https://api.example.com/users/${userId}`;
  if (includePosts) url += '?include=posts';
  return fetch(url).then(res => res.json());
}

function UserProfile({ userId, includePosts }) {
  const queryKey = ['user', userId, includePosts];
  const { data, isLoading, error } = useQuery(queryKey, fetchUser);

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

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
      {data.posts && <div>{data.posts.map(post => <p key={post.id}>{post.title}</p>)}</div>}
    </div>
  );
}

这个例子中，我们使用了一个包含额外参数的查询键，并在查询函数中根据这些参数动态构造了请求 URL。

总结

React Query 提供了灵活的方法来根据需求传递参数，无论是直接在 useQuery 钩子中传递，还是通过查询键或查询函数工厂，都可以便捷地实现参数的动态化和定制化。这使得 React Query 成为处理数据获取和状态管理的非常强大的工具。