How to wait for multiple graphql mutations to finish then call another function

Question

Basically I have an array of objects and based from that array's length, I need to do a mutation for each instance like so:

arrayOfObjects.forEach((object) => {
  someGraphQlMutation({
    variables: object.id,
  });
});

-----------------

const [someGraphQlMutation] = useMutation(
    SOME_GRAPHQL_MUTATION,
    {
        onCompleted: (data) => {
            // callback
        }
    }
);

However, after all the mutations are done, I need to call another function. I need to wait for the iteration mutations to finish before calling the callback function. Am I able to use Promise.all in this context?

Answer 1

Yes, you can use Promise.all to await all the mutations:

const [someGraphQlMutation] = useMutation(SOME_GRAPHQL_MUTATION);
const doEverything = async () => {
  try {
    const results = await Promise.all(arrayOfObjects.map(object => {
      return someGraphQlMutation({ variables: object.id });
    }));
    // results will be an array of execution result objects (i.e. { data, error })
    // Do whatever here with the results
  } catch (e) {
    // Handle any errors as appropriate
  }
}