Estoy agrupando solicitudes de mutación y disparándolas con Promise.all sin embargo, la devolución de llamada a veces se activará antes de que lo haga la mutación. Solo puedo recrear el problema al eliminar elementos individuales. Sé que hay algunos errores al hacer async/await dentro de los bucles, pero no estoy seguro de si eso es lo que está causando mis problemas.
Lo que estoy tratando de lograr:
Reúna todas las mutaciones que deben ejecutarse (agregar, eliminar y actualizar tienen puntos finales diferentes y deben enviarse individualmente).
Active todas las mutaciones y espere hasta que todas se completen con éxito.
Recuperar la lista con todas las actualizaciones aplicadas
useQuery('todos', () => getTodosList(), { onSuccess: ({ todos }) => { setOriginalList(todos); }, }); const saveUpdates = useCallback(async () => { const mutations = []; for (let i = 0; i < list.length; i++) { const entry = list[i]; if (entry.modified) { let mutation; const { modified, id } = entry; if (modified === MODIFICATION.Deleted) { mutation = await deleteMutation.mutateAsync(id); } else if (modified === MODIFICATION.Updated) { mutation = await updateMutation.mutateAsync(entry); } else if (modified === MODIFICATION.Added) { mutation = await createMutation.mutateAsync(entry); } mutations.push(mutation); } } await Promise.all(mutations).then(() => { queryClient.invalidateQueries('todos'); }); },[...all the dependencies]);En su if/else no está asignando una Promesa a la mutación sino el resultado de la promesa. Luego, los está resolviendo a continuación con await Promise.all
No debes esperar en la asignación del bucle.
En vez de
if (modified === MODIFICATION.Deleted) { mutation = await deleteMutation.mutateAsync(id); } else if (modified === MODIFICATION.Updated) { mutation = await updateMutation.mutateAsync(entry); } else if (modified === MODIFICATION.Added) { mutation = await createMutation.mutateAsync(entry); }Deberías escribir
if (modified === MODIFICATION.Deleted) { mutation = deleteMutation.mutateAsync(id); } else if (modified === MODIFICATION.Updated) { mutation = updateMutation.mutateAsync(entry); } else if (modified === MODIFICATION.Added) { mutation = createMutation.mutateAsync(entry); }