Flag to reuse/share mutation by mutationKey

[VolodymyrBaydalka]

Hello,

It would be nice to have some kind of flag/option that allows you to reuse mutations from cache by mutationKey, instead of creating new one.

Imagine a paged list and each item of the list has a button "do something". Users could click button on any number of items, each item should show that "something" is in progress. It's very easy to do, with useMutation hook. But as soon as we change the page of the list, we will lose connection between items and mutations on the previous page.

We could use useQuery hook for that with some modifications to behave like a mutation, but I think useMutation suits for this better.

If I missed something and there is such a thing or you think I should use useQuery in such a case, please let me know.

[TkDodo]

Users could click button on any number of items, each item should show that "something" is in progress.

For this specific use-case, there is useIsMutating, where you can filter by mutationKey and it will give you how many mutations are currently running for that key.

[VolodymyrBaydalka]

It means my code will looks something like this:

const mutation = useMutation(() => doSomething(), { mutationKey: ['do', id] });
const isMutating = useIsMutating(['do', id]);

return (
<li>
  <span>{name}</span>
  {isMutating 
    ? (<span>something in progress"</span>)
    :<button onClick={() => mutation.mutate()}>do something</button>
  }
</li>
);

and it's a bit wierd to have useIsMutating in the next line after useMutation, especially if mutation could provide same information.
Also having such option on useMutation hook, will allow as to check errors and what is more importantly re-subscribe to onSuccess callback and etc.

I tried to look into code, and unfortunately, this change should be made quite deeply in MutationObserver class. So to do it on my own in my project, I need to recreate useMutation hook and MutationObserver class. It doesn't look too complicated, but there is some edge cases and non-trivial logic to consider in case it will be part of library. In my case I don't expect to have more than one mutation observer in same time, I just need ability to get state of unfinished mutation in case of react component is recreated. But what should it do if there is two mutation at same time? What should it do if each of them call mutate/reset method?

[TkDodo]

As I said in issue #2304 (comment), I am open to adding this as a feature to useMutation if it's non-breaking.

What should it do if each of them call mutate/reset method?

I would assume that calling reset would put the shared mutation into idle state for all observers. Calling mutate multiple times on the same mutation is also currently possible (just click the button twice in the same component), so I don't think anything needs to change here.

[TkDodo]

if you have ideas how to make it happen and have already looked at the code, it would also be awesome if you would like to open a PR?