如何使用React-Query并行处理多个Mutation？自定义useMutation Hook的并行执行问题

我来帮你梳理下这个问题——React Query完全可以处理并行mutation的场景，你的问题主要出在异步循环的处理方式上，咱们一步步来解决：

你的原代码问题分析 #

你当前的写法里，forEach并不支持异步等待：你在forEach的回调里写了async函数，但forEach会直接遍历完所有元素，不会等待每个回调里的await getSchedule完成。这就导致两个问题：

1. 当你执行Promise.all(mutations)时，mutations数组可能还没收集齐所有的Promise，部分mutation还没被加入数组就开始等待了；
2. 每个updateSchedule会在对应的getSchedule完成后立即触发，而不是统一并行启动，达不到你想要的“批量并行执行”效果。

另外要明确：mutateAsync调用时就会触发mutation请求，这是正常行为——它返回的Promise会在请求完成时resolve，所以咱们需要的是先准备好所有mutation需要的参数，再统一触发所有mutation并等待它们完成。

正确的并行实现方式 #

第一步：批量并行获取所有ETag #

先把所有getSchedule请求并行执行，拿到所有需要的etag，避免串行等待每个请求拖慢速度：

// 并行获取所有schedule对应的etag
const scheduleWithEtags = await Promise.all(
  schedulesForDeletion.map(async (schedule) => {
    const resp = await monitoringService?.getSchedule(schedule.schedule_id);
    return {
      schedule,
      etag: resp?.type === "data" ? resp.headers.etag : "",
    };
  })
);

第二步：批量并行触发Mutation #

拿到所有参数后，再统一触发所有mutation，用Promise.all等待全部完成：

// 并行执行所有update mutation
await Promise.all(
  scheduleWithEtags.map(({ schedule, etag }) => {
    return updateSchedule({
      monitoringService: monitoringService as MonitoringServiceClient,
      schedule,
      etag,
    });
  })
);

为什么不用切换到Axios？ #

完全没必要放弃React Query，它在这种场景下的优势很明显：

• 你可以在自定义useUpdateSchedule Hook的onSuccess回调里，自动触发相关查询的缓存失效，比如：

  // 示例：useUpdateSchedule的定义
  const useUpdateSchedule = (queryClient: QueryClient, jobId: string) => {
    return useMutation({
      mutationFn: (params) => {
        // 你的更新接口调用逻辑
        return yourApi.updateSchedule(params);
      },
      onSuccess: () => {
        // 失效对应的schedule列表查询，自动更新缓存
        queryClient.invalidateQueries({ queryKey: ["schedules", jobId] });
      },
    });
  };
  

• 它提供了统一的loading、error状态管理，你可以通过updateScheduleStatus监控整体的mutation状态；
• 还支持重试、乐观更新等高级特性，这些都是直接用Axios需要自己实现的逻辑。

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