如何用React Query预取动态数量的查询？

当然可以实现动态数量查询的预取，核心是利用React Query提供的queryClient.prefetchQuery方法，配合遍历逻辑处理动态列表。以下是适配你现有代码的具体实现：

1. 编写预取函数 #

创建一个独立的预取函数，接收你的persons数组，遍历每个元素发起预取请求：

import { queryClient } from './你的QueryClient实例路径'; // 替换为你的全局queryClient路径
import { INCOME_API } from './你的API路径';
import type { TransformerIncomeRequestDto } from './你的类型定义路径';

export const prefetchIncomeData = async (persons: { id: string; ident: string; incomeData: TransformerIncomeRequestDto }[]) => {
  // 并行发起所有预取请求，确保所有数据都被缓存
  await Promise.all(
    persons.map(async (person) => {
      await queryClient.prefetchQuery({
        queryKey: ["income", person.ident], // 和useQueries中的queryKey保持完全一致
        queryFn: async () => {
          const { data } = await INCOME_API.transformer.transformerIncome(person.incomeData);
          return data;
        },
        staleTime: Infinity, // 与useQueries的缓存配置对齐
      });
    })
  );
};

2. 在合适时机调用预取函数 #

你可以在组件挂载、路由跳转前等场景调用这个预取函数，确保后续调用useGetIncome时直接命中缓存：

组件内挂载时预取 #

import { useEffect } from 'react';
import { useGetIncome } from './你的useGetIncome路径';
import { prefetchIncomeData } from './你的预取函数路径';

const IncomeComponent = ({ persons }) => {
  useEffect(() => {
    // 当persons数组变化时，重新预取数据
    prefetchIncomeData(persons);
  }, [persons]);

  // 此时useGetIncome会直接读取缓存，不会重复发起请求
  const incomeQueries = useGetIncome(persons);

  // 渲染逻辑...
  return (
    <div>
      {incomeQueries.map((query, index) => (
        <div key={persons[index].id}>
          {query.isLoading ? '加载中...' : JSON.stringify(query.data)}
        </div>
      ))}
    </div>
  );
};

关键注意事项 #

• 预取时的queryKey、queryFn、staleTime等配置必须和useQueries中的完全一致，否则无法命中缓存
• 全局queryClient实例必须通过QueryClientProvider注入到应用中，确保预取的缓存能被组件读取
• 如果不需要等待所有预取完成，可以去掉Promise.all，让请求并行发起，提升性能
• 由于你在useQueries中开启了suspense: true，预取完成后组件渲染时会直接使用缓存数据，不会触发Suspense加载状态

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