React-Query Async Await firing in wrong order loop

Question

I'm batching mutation requests and firing them off with Promise.all however the callback will sometimes trigger before the mutation has. I can only recreate the issue when deleting single items. I know there's some gotchas when doing async/await within loops but I'm not sure if that's what's causing my problems.

What I'm trying to accomplish:

Gather all the mutations that need to be run (add, delete, and update have different endpoints and must be sent individually).
Trigger all the mutations and wait until they all successfully complete.

Refetch the list with all the updates applied

 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]);

user_8861814 · Answer

In your if/else's you are not assigning a Promise to mutation but the result of the promise. Then you are resolving them all below with await Promise.all

You should'n await in the assignation of the loop

Instead of

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);
}

You should write

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);
}

React-Query Async Await firing in wrong order loop

1 Answers