How to make second GraphQL mutation after first one is completed in loop

Question

Here I've one scenario in which I have one array which has some items to add into the database via GraphQL mutation.

I'm sending that mutation in a loop, and it's working fine.

But when I check into my database some mismatch is happened let say I have 10 items in the array and request are made rapidly so what happed is only 2 or 3 items is added to the database.

The first solution I tried is using Promise.all but it does not work.
Second thing in my mind is to send the current index to that mutation and after it is successful then it will return me the same index so I send another item according to that but I am confused that how to send that index along with variables and If it takes that but doesn't know whether it will return me same or not.

I attaching some of my code snippets to get more idea:

import { useMutation } from "@apollo/client";

// Req in loop
const updateDataInLoop = (cartId, strapiId) => {
      for (let i = 1; i < items.length; i++) {
        updateReq({
          variables: {
            // API variables
          },
        });
      }
  };

// graphql api
const [updateReq] = useMutation(UPDATE_MUTATION, {
    onCompleted: (data) => {
      // after this I've to send another req
     },
  });

score 0 · Answer 1 · answered Dec 26 '21 at 23:35

0

The problem is that you are not awaiting all these GraphQL mutations. Basically, you are sending multiple requests at once, even though a mutation returns a promise, which in turn translates into just a few of the products actually getting updated/created in the database. You should instead do like this:

import { useMutation } from "@apollo/client";
// Req in loop
const updateDataInLoop = (cartId, strapiId) => {
      for (let i = 1; i < items.length; i++) {
        updateCartMutation(variable)
      }
  };

//make an async mutation
const updateCartMutation=async (variable)=>await updateReq({
          variables: {
            // API variables
          },
        });

// graphql api
const [updateReq] = useMutation(UPDATE_MUTATION, {
    onCompleted: (data) => {
      // after this I've to send another req
     },
  });

answered Dec 26 '21 at 23:35

Peter Malik

403
4
14

Thanks, Peter for your answer I will check this. Is that anything I've to do in `updateReq` onCompleted method or it will automatically return in await one? – Akash Chavda Dec 27 '21 at 04:15
@AkashChavda You dont have to do anything – Peter Malik Dec 28 '21 at 00:50
I tried your logic but actually didn't work all request are fire together – Akash Chavda Dec 28 '21 at 08:40
@AkashChavda the requests may be batched https://www.apollographql.com/blog/apollo-client/performance/batching-client-graphql-queries/ – Peter Malik Dec 28 '21 at 08:58
Can I send an `index` to `updateReq` which represents the current data? – Akash Chavda Dec 28 '21 at 13:53

score 0 · Accepted Answer · edited Jan 12 '22 at 13:00

After some of the head-scratching operations, I finally find one solution which is worked.

// Req in loop
const updateDataInLoop = async (cartId, strapiId) => {
      for (let i = 1; i < items.length; i++) {
        try { 
         await updateReq({
           variables: {
             // API variables
           },
         });
         continue;
        } catch e {
          break;
        } 
      }
  };

// graphql api
const [updateReq] = useMutation(UPDATE_MUTATION);

How to make second GraphQL mutation after first one is completed in loop

2 Answers2