useMutation with path parameter from an array & send group request to the same endpoint except parameter difference

[Xi-gofore]

I have an backend endpoint with url pattern: /users/<recipient_name>, where the <recipient_name> is a string of an array element. That array hosts all recipients e.g. const recipientsArr = ['foo', 'bar', 'ipsu', ...];. I have to POST to that endpoint for all recipients. For example, when send to one recipient, it is POST /users/foo

import React from 'react';
...
const myScreen = () => {
   const recipientsArr = .....
   // 1. How to pass each element of array as the value of path parameter ?
   // 2. What is the decent way to POST to the endpoint for all recipients in the array?
   const { mutateAsync }
        = useMutation(['send-to-all-recipients'], (values) => axios.post('/users/<recipient_name>', values)
}

My two questions are in the code comment above, it would be nice if someone could guide me. Thanks in advance!

[TkDodo]

so do you need to call that endpoint multiple times, once for each recipient? If so, I think you'd want the mutation to accept one recipient, and then just call that multiple times:

const { mutateAsync }
        = useMutation(['send-to-recipient'], ({recipient_name, values }) => axios.post(`/users/${recipient_name}`, values)

you can then call mutateAsync multiple times, e.g. in a Promise.all

[Xi-gofore]

Thanks! Yes, I do want to call that endpoint multiple times, once for each recipient, in other words, each time the value of parameter recipient_name is different. I am currently using the solution as you suggested. I wonder is there a alternative solution kind of request batch support in react-query for my needs :)

[TkDodo]

since mutateAsync is async, you can decide if you want to fire them of in serial or in parallel. There isn't much the lib can do for you I think because it depends on the use-case