如何与反应查询并行处理多个突变

Question

我有一个自定义 useMutation 挂钩：

  const {
    status: updateScheduleStatus,
    reset: updateScheduleReset,
    mutateAsync: updateSchedule,
  } = useUpdateSchedule(queryClient, jobId as string);

据我所知设置突变，但如果我想进行多个并行突变，我将如何使用它？

我已尝试执行以下操作，但更改会在到达 Promise.all(mutations 行之前执行。

        let mutations: Array<any> = [];

        schedulesForDeletion.forEach(async (schedule) => {
          const resp = await monitoringService?.getSchedule(
            schedule.schedule_id,
          );
          mutations.push(
            updateSchedule({
              monitoringService: monitoringService as MonitoringServiceClient,
              schedule,
              etag: resp?.type === "data" ? resp.headers.etag : "",
            }),
          );
        });

        console.dir(mutations);

        await Promise.all(mutations);

我会通过 mutateAsync returns 一个 Promise 他们不会按顺序开火但似乎他们会开火。

有没有办法在 react-query 中处理这个问题，还是我最好只用 axios 执行这个？在 react-query 中执行此操作会很有用，因为我需要在突变成功时使某些查询无效。

Answer 1

运行多个并行突变确实适用于 mutateAsync:

const { mutateAsync } = useMutation(num => Promise.resolve(num + 1))

const promise1 = mutateAsync(1)
const promise2 = mutateAsync(2)

await Promise.all([promise1, promise2])

我猜在您的示例中，您向数组推送了一个 Promise，然后您继续循环并 await monitoringService?.getSchedule。只有在那之后 returns，你才会触发第二个突变。

所以从这个意义上说，这似乎是“阻止”你执行的原因。如果你推送来自 getSchedule 的原始 Promise，它应该可以工作：

schedulesForDeletion.forEach((schedule) => {
  mutations.push(
    monitoringService?.getSchedule(
      schedule.schedule_id,
      ).then(resp => updateSchedule({...})
    )
  )
})

如何与反应查询并行处理多个突变

How to handle multiple mutations in parallel with react-query

javascript

reactjs

promise

react-query

promise.all