如何在React-Query的useQueries中并行运行useInfiniteQuery？

当然可以用useQueries来并行执行多个无限查询，本质上就是把每个useInfiniteQuery的配置项作为queries数组的元素，和普通并行查询的思路一致，只是要注意每个无限查询的独立状态管理。

针对你的场景，这里给出具体的实现方案：

完整代码示例 #

import { useQueries } from '@tanstack/react-query';
import { getDetailsById, GetDetailsByIdResponse } from './your-api-module'; // 替换成你的实际导入

const ids: string[] = ['a', 'b', 'c'];

function useParallelInfiniteQueries() {
  return useQueries({
    queries: ids.map(id => ({
      // 每个查询的唯一key，必须包含id，确保缓存独立
      queryKey: ['getDetailsById', id],
      // 无限查询的queryFn，接收pageParam参数
      queryFn: async ({ pageParam = '' }) => {
        const { data } = await getDetailsById(id, pageParam);
        return data;
      },
      // 每个查询独立处理分页token
      getNextPageParam: (lastPage: GetDetailsByIdResponse) => lastPage.nextPageToken,
      retry: false,
      // 其他无限查询支持的配置都可以在这里添加，比如enabled、staleTime等
    })),
    // 可选：控制是否并行执行（默认就是并行，也可以设置sequential: true改成串行）
    // sequential: false
  });
}

// 使用示例
function DetailsList() {
  const infiniteQueries = useParallelInfiniteQueries();

  return (
    <div>
      {infiniteQueries.map((query, index) => {
        const id = ids[index];
        if (query.isLoading) return <div key={id}>加载中...</div>;
        if (query.isError) return <div key={id}>加载失败</div>;

        return (
          <div key={id}>
            <h3>ID: {id}</h3>
            {/* 渲染所有分页的数据 */}
            {query.data?.pages.map((page, pageIndex) => (
              <div key={pageIndex}>
                {/* 渲染当前页的详情内容 */}
                {page.items.map(item => (
                  <p key={item.id}>{item.content}</p>
                ))}
              </div>
            ))}
            {/* 加载下一页按钮 */}
            {query.hasNextPage && !query.isFetchingNextPage && (
              <button onClick={() => query.fetchNextPage()}>加载更多</button>
            )}
            {query.isFetchingNextPage && <span>加载中...</span>}
          </div>
        );
      })}
    </div>
  );
}

关键细节说明 #

• 独立缓存与状态：每个查询的queryKey必须包含对应的id，这样React Query会把每个id的无限查询当成独立的缓存条目，各自维护分页数据、加载状态和下一页token，不会互相干扰。
• pageParam的独立性：每个queryFn中的pageParam是当前查询专属的，调用fetchNextPage()时，React Query会自动传入该查询的上一页返回的nextPageToken作为新的pageParam。
• 操作单个查询：useQueries返回的数组中，每一项都是对应id的无限查询结果对象，包含fetchNextPage、hasNextPage、data.pages等无限查询特有的属性，你可以单独对每个查询触发加载下一页操作。

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