How to run multiple mutations in parallel using Apollo Client and GraphQL HoC?

Question

I'm currently using the GraphQL HoC to pass a mutation through props. However, I'd like to run a batch of mutations simultaneously, while also having error handling and knowing which mutations failed - with the ability to run the failed ones again. I don't know how many mutations I'll run, it'll depend on the number of IDs i get which will be passed down as an Array in props.

What would be the best way to achieve this?

My initial thought was to somehow use the Map method on the array and run the mutation on each one. I dont know how I'll be able to track which ones failed using this method, I also don't know how to run them in parallel

The mutation will look something like this:

updateUserAccount({userId, reason})

I will need to run anywhere between 5-10 of these in parallel

I will pass the mutation through props using the graphql HoC so I'll have access to the mutation in my component. I'd like to run the failed ones 2 more times.

Answer 1

Use Promise.all() to call the mutations. Also you need to create some mapper function to control the attempts when some request fails:

Create and object for every request:

const ids = ["1", "2", "3"];
const meta = ids.map(id => ({
  id,
  fn: () => updateUserAccount({id, reason}), //--> mutation function
  attemps: 0, //--> <= 3
  status: null, //--> ["OK", "ERROR"]
  data: null //-> response data, equal null if fails
}));

Create the mapper function:

Here you can control the function attempts. The request will always resolve, this way you don't need to worry about rejections. If the request fails after 3 attempts you will resolve the object with data equal null and status equal error.

const mapper = item => {
  return new Promise(async resolve => {
    const call = async (attempts = 0) => {
      try {
        const data = await item.fn();
        resolve({ ...item, status: "OK", attempts, data });
      } catch (err) {
        ++attempts;
        if (attempts < 3) {
          call(attempts);
        } else {
          resolve({ ...item, status: "ERROR", attempts, data: null });
        }
      }
    };
    call();
  });
};

Execute requests:

Run all function. You won't get any rejection, the mapper function is responsible for that.

const fails = response.filter(item => item.status === "ERROR");

If you need to know which function failed just check the response object:

 const fails = response.filter(item => item.status === "ERROR");

Answer 2

I'm currently using the GraphQL HoC to pass a mutation through props. However, I'd like to run a batch of mutations simultaneously, while also having error handling and knowing which mutations failed - with the ability to run the failed ones again. I don't know how many mutations I'll run, it'll depend on the number of IDs i get which will be passed down as an Array in props.

What would be the best way to achieve this?

My initial thought was to somehow use the Map method on the array and run the mutation on each one. I dont know how I'll be able to track which ones failed using this method, I also don't know how to run them in parallel

The mutation will look something like this:

updateUserAccount({userId, reason})

I will need to run anywhere between 5-10 of these in parallel

I will pass the mutation through props using the graphql HoC so I'll have access to the mutation in my component. I'd like to run the failed ones 2 more times.