如何在useInfiniteQuery中传递多个参数（如groupId）？

问题原因 #

你直接调用listofSessions({groupId})会立即执行函数并返回一个Promise，但useInfiniteQuery的第二个参数要求传入一个函数（queryFn），而非Promise实例，这才导致了Missing queryFn的错误提示。

正确解决方案 #

方案一：用匿名函数包裹queryFn #

将listofSessions用匿名函数包裹，确保传递给useInfiniteQuery的是一个函数而非执行结果：

const { data, isLoading, fetchNextPage, hasNextPage, error, isFetching } = 
useInfiniteQuery("listofSessions", ({ pageParam = 1 }) => listofSessions({ groupId, pageParam }), {
  getNextPageParam: (lastPage, pages) => {
    if (lastPage.length < 10) return undefined;
    return pages.length + 1;
  },
});

方案二：将参数加入queryKey（更推荐） #

React Query的queryKey用于标识查询，参数变化时会自动触发新查询。把groupId加入queryKey，同时调整queryFn的写法：

const { data, isLoading, fetchNextPage, hasNextPage, error, isFetching } = 
useInfiniteQuery(["listofSessions", groupId], ({ queryKey, pageParam = 1 }) => {
  const [_, groupId] = queryKey;
  return listofSessions({ groupId, pageParam });
}, {
  getNextPageParam: (lastPage, pages) => {
    if (lastPage.length < 10) return undefined;
    return pages.length + 1;
  },
});

这种方式的优势是：当groupId发生变化时，React Query会自动取消旧查询并发起新查询，保证数据与参数匹配。

最后记得修改listofSessions函数里的硬编码值，改用传入的参数：

const listofSessions = async ({ groupId, pageParam = 1 }) => 
  await axios
    .get(`${apiURL}/groups/allsessions`, {
      params: {
        groupId, // 替换硬编码的63，使用传入的参数
        page: pageParam,
      },
    })
    .then((res) => {
      return res.data.data;
    });

内容的提问来源于stack exchange，提问作者Question hunter