How to pass more parameters in useInfiniteQuery?

在 React Query 的 useInfiniteQuery 钩子中传递额外参数的方法可以通过多种方式实现，主要取决于你想如何构建和使用这些参数。具体来说，你可以在查询函数中直接使用这些参数，或者将参数包含在 queryKey 中。

方案一：在查询函数中使用参数

当你定义查询函数时，可以在该函数中直接引用外部变量或参数。这种方式使得你的查询函数能够根据这些参数动态地更改请求的行为或请求的内容。

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

function fetchProjects(page = 0, pageSize = 10, filter = "") {
  return fetch(`api/projects?page=${page}&pageSize=${pageSize}&filter=${filter}`)
    .then(res => res.json());
}

function ProjectsComponent({ pageSize, filter }) {
  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status
  } = useInfiniteQuery(
    ['projects', { pageSize, filter }],
    ({ pageParam = 0 }) => fetchProjects(pageParam, pageSize, filter),
    {
      getNextPageParam: (lastPage, allPages) => lastPage.nextPage,
    }
  );

  // UI部分
}

方案二：使用 queryKey 传递参数

在 useInfiniteQuery 中，queryKey 不仅是一个简单的字符串或数组，它还可以包含对象，这使得你可以在 queryKey 中嵌入额外的参数信息。React Query 库会根据 queryKey 的内容来决定何时重新获取数据，如果 queryKey 中的参数发生变化，React Query 将重新运行查询函数。

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

function fetchProjects({ queryKey, pageParam = 0 }) {
  const [_key, { pageSize, filter }] = queryKey;
  return fetch(`api/projects?page=${pageParam}&pageSize=${pageSize}&filter=${filter}`)
    .then(res => res.json());
}

function ProjectsComponent({ pageSize, filter }) {
  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status
  } = useInfiniteQuery(
    ['projects', { pageSize, filter }],
    fetchProjects,
    {
      getNextPageParam: (lastPage, allPages) => lastPage.nextPage,
    }
  );

  // UI部分
}

综合对比和建议

以上两种方案都可以有效地将额外参数传递给 useInfiniteQuery。选择哪种方案取决于你的具体需求：

• 如果你的参数很少改变或者与 UI 状态紧密相关，建议使用方案一，在查询函数中直接使用这些参数。
• 如果你的参数经常变化，且每次变化都需要从服务器获取新数据，建议使用方案二，将参数放在 queryKey 中，这样 React Query 会自动处理缓存和数据重新获取的问题。

每种方法都有其适用场景，理解你的应用需求将帮助你做出最佳选择。