calling useMutation in a loop like useQUeries

[Rahulpippalla]

Hello everyone,
I dont know weather it is possible but how can we use useMutation inside a loop.

[gopusrikanth04]

Hello Team.

Even I would like to have the same functionality, where i need to call useMutation in Side a loop where data is prepared and send as payload

     aDeleteVariantData.forEach((oDeleteItem, nIndex) => {
        oDeleteVariants.mutate(oDeleteItem);
        
        // We are able to delete with axios directly but not using the mutate functionality.
        // how should achive this.
        //     delete(`/varient varientId= ${(oDeleteItem.id)}`)
         //For Each delete we have different url parameters which is not possible with the mutate
        // Is there anything like useQuries for useMutate
   });

[virajsoni06]

@Rahulpippalla @gopusrikanth04 Did you find a solution to this?

[TkDodo]

useMutation doesn't really do anything, except giving you a mutate function that, when called, will trigger the mutation. You cannot call useMutation in a loop due to the rules of hooks, but you can certainly call the returned mutate and mutateAsync methods in loops

[virajsoni06]

@TkDodo That's not what I mean. Here's a loop which is calling mutate function from useMutation hook

await Promise.all(
  pdfList.map(async ({ id }) => {
    const pdfLinkData = await mutatePdfLink({
      pdfHash: id,
      pdfProductId: productId
    });
    console.info(pdfLinkData);
  })
);

And the mutation function

  const [mutatePdfLink, { status: pdfLinkStatus, error: errorPDFLink }] = useMutation(
    async ({ pdfHash, pdfProductId }) => {
      if (!pdfHash) return [];

      const { response } = await request({
        endpoint: `${api.endpoints.paperPdfDownload({
          userId: ID,
          paperId: pdfProductId
        })}/${pdfHash}`
      });
      return response;
    }
  );

Here, the mutate function is being called only for the last item in the loop.
I'm out of ideas what is that's causing this.

PS: The request function is simply a wrapper around fetch.

[virajsoni06]

PPS: The app is using react-query@1.5.2 version. Everything was working well until few days back.

[TkDodo]

The app is using react-query@1.5.2 version.

okay, can you try it in v3, maybe in a codesandbox?

[virajsoni06]

That's really not an option here.
I'm trying to understand why is the mutate function is not working as expected.

Not sure if it helps but in onMutate callback, all the instances from the loop are being called. Seems like the mutate function is causing issues

[moiri]

I am not sure whether this is still relevant but I stumbled over the same issue and found the answer in the documentation:

There is a slight difference in handling onSuccess, onError and onSettled callbacks when it comes to consecutive mutations. When passed to the mutate function, they will be fired up only once and only if the component is still mounted. This is due to the fact that mutation observer is removed and resubscribed every time when the mutate function is called. On the contrary, useMutation handlers execute for each mutate call.