useMutations for multiple mutations

[trevoro]

Hey,

We have a method for grouping queries useQueries but there isn't one for grouping together multiple mutations.
We have some components that contain all the queries and mutations and pass the results down to dumber components and rather than having many variables like actionFooMutation, actionBazMutation it would be nice to be able to group them together in a single variable. Something like

const mutations = useMutations({
   foo: ['actionFoo', { ...paramsOne }],
   bar: ['actionBar', { ...paramsTwo }],
});

mutations.foo.isLoading

etc.

[TkDodo]

I think you can build that in user-land:

const useMutations = () => {
  const foo = useMutation()
  const bar = useMutation()
  return { foo, bar }
}

[dwjohnston]

@TkDodo What if you want to do it with arbitrary numbers (for example, mutation per item in an array).

[TkDodo]

you can make one mutation that fires multiple requests

[dwjohnston]

I will note that

function useMultipleMutation(ids: Array<string>){
    const ref = useRef<Record<string, any>>({}); 
    ids.forEach((v) => {     
        // eslint-disable-next-line react-hooks/rules-of-hooks
        const result = useMutation(likeTheThing); 
        ref.current[v] = result; 
    })
    return ref; 
} 

Although this technically breaks rules of hooks, in my test usage of it, it appears to be not problematic.

[parsadotsh]

@TkDodo Imagine you want to build a chat app where each new message sent is a mutation. To do optimistic updates, I'm not sure there's a way to do it currently without modifying the query cache (the "UI" approach). Wouldn't a useMutations hook be nice here? Instead of a single "variables" and "isPending" it would return an array of them for all the current active mutations.

[TkDodo]

useMutationState can do it.

[parsadotsh]

@TkDodo Thank you!! 😄 Works great, I was about to roll my own from scratch haha.

I now realize this was shown in "If the mutation and the query don't live in the same component" but I didn't really look at it since the title didn't describe my situation. Maybe the title can be amended slightly.

[Arthur944]

What if you want to trigger mutations from a central location?

Imagine a table where you can select rows, and press a single button to run an action on each selected row.

Currently the only way I can think of is to do a useMutation in each of the Row components, and put a useEffect in there that triggers a mutations if a prop changes. That feels very wrong.

That or batch all the actions into a single useMutation, but then you'd have to wait for all rows to finish in order to see the results of any one row. If there's one that takes a long time it looks like all the rows are taking forever.

[TkDodo]

Imagine a table where you can select rows, and press a single button to run an action on each selected row.

Trigger the mutation in the table component by calling .mutate() once for each row, then have each row track the state with useMutationState()