Tengo un gancho de useMutation de uso personalizado:
const { status: updateScheduleStatus, reset: updateScheduleReset, mutateAsync: updateSchedule, } = useUpdateSchedule(queryClient, jobId as string);Lo que entiendo establece la mutación, pero ¿cómo usaría esto si quisiera hacer múltiples mutaciones paralelas?
He intentado implementar lo siguiente, pero las mutaciones se ejecutan antes de llegar a 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); Habría superado eso, ya que mutateAsync devuelve una Promise de que no dispararían en secuencia, pero parece que lo hacen.
¿Hay alguna manera de manejar esto en react-query o es mejor que lo haga con axios? Sería útil hacerlo en react-query ya que necesito invalidar algunas consultas cuando las mutaciones son exitosas.
ejecutar múltiples mutaciones en paralelo funciona con mutateAsync :
const { mutateAsync } = useMutation(num => Promise.resolve(num + 1)) const promise1 = mutateAsync(1) const promise2 = mutateAsync(2) await Promise.all([promise1, promise2]) Supongo que en su ejemplo, envía una Promesa a la matriz, luego continúa con su ciclo y await monitoringService?.getSchedule . Solo después de que eso regrese, disparas la segunda mutación.
Entonces, en ese sentido, parece que esto es lo que está "bloqueando" su ejecución. Si presiona la Promesa original que proviene de getSchedule , debería funcionar:
schedulesForDeletion.forEach((schedule) => { mutations.push( monitoringService?.getSchedule( schedule.schedule_id, ).then(resp => updateSchedule({...}) ) ) })