useMutation - maintain state for array of items

[srph]

First, thank you for making and maintaining this library!

As for my idea: Is there a way with react-query to maintain mutation state for an array of items?

My use-case is having an non-blocking UI file uploader. Here's an example of how you might do it without react-query:

const [loading, setLoading] = useState({
  'abc': true
  'def': false
})

const [progress, setProgress] = useState({
  'abc': 50,
  'def': 100
})

{files.map((item, i) => {
  const itemIsUploading = loading[item.id]
  const itemProgress = progress[item.id]
})

[TkDodo]

I don't understand that code or how it relates to react-query / mutations at all, sorry.

[srph]

No worries, I think my explanation could use some work.

I was wondering if react-query could introduce another hook that would maintain mutation state for a collection of items that have independent/parallel http requests.

I'm not able to useMutation (or at least I don't know how to) in my use-case because given a file uploader and this scenario:

• User selects file (X, Y, Z). I call mutate to upload the file
• While files (X, Y, Z) are being uploaded, user is able to select another file (A).
• Each of these files have state of their own - X could have resulted to an error. Y could probably be done. All while A and Z are still on-going.

I want to be able to display the state of each file. With useMutation as is, I have a single isLoading and error state which will not allow me to achieve the requirements above.

I'm not sure how the API could look like, but I'm also a bit curious if anyone has done anything similar with react-query. It could be a bit similar to useQueries which allows you to pass multiple queries, but in this case mutations.

Sorry for the long write up. I have a feeling this may be out of scope, but at the same time, I have that feeling that useMutation (or a separate yet similar hook) could be supporting this.

[TkDodo]

So one suggestion would be: have each file upload (X, Y, Z, A) have their own useMutation instance. Then, each one has their own loading / error state.

The drawback is that right now, the mutation state is only available locally:

• Status of useMutation not shared across usages/components with custom hook (like useQuery does) #2304

If you can display the status in the component that has access to the mutation, that's fine.

What you can do is leverage useIsMutating at a higher level to see which mutations are currently running / not running. You can then read imperatively via queryClient.getMutationCache().findAll() or something to access your different mutations and their states.

Or, you just move the state of the mutation into some other state manager higher up the component tree.