Execute parallel requests to some endpoint and display their status

[evgenoir]

Hi there.
While using the RTK Query, I faced the following problem: I have a user interface with a list of devices, and I want to be able to select multiple devices in the list, run some action on them, and show the loading spinner for each device for which the action is performed. To do this, I have to make several parallel requests to some endpoint on the backend, and I do it like this:

const [pullDeviceConfig, pullDeviceConfigResult] = usePullDeviceConfigMutation()

const handlePullConfig = async () => {
	const promises = selectedIds.map(async id => {
	    const result = await pullDeviceConfig({
	        'device_id': id
	    })

	    if (result.data) {
	    	...
	    }

	    if (result.error) {
	        ...
	    }
	})

	await Promise.all(promises)
}

Since each request has a different duration, in order to correctly display the status of loading spinners, I need to get the value of something like pullDeviceConfigResult.isLoading for each individual spinner. As example, in React Query you can use useQueries, that gives you an Array of results, and do something like this:

const isLoading = queryResults.some(query => query.isLoading)

But is there a way to do the same for mutations in RTK Query?

[Dovakeidy]

Personally, I'd recommend an API route that lets you modify several resources at once.

But regarding your example, since each mutation is an individual request, I'd simply use a React state.

Eg.

const [isLoading, setIsLoading] = useState(false);
const [pullDeviceConfig, pullDeviceConfigResult] = usePullDeviceConfigMutation()

const handlePullConfig = async () => {
      setIsLoading(true);
      
const promises = selectedIds.map(async id => {
	  const result = await pullDeviceConfig({
	      'device_id': id
	  })

	  if (result.data) {
	   ...
	  }

	  if (result.error) {
	      ...
	  }
})

      try {
       await Promise.all(promises)
      } catch (err) { // do somthing }

    setLoading(false);
}