Triggering multiple mutations from parent component with react-query - reactjs

Question

I'm working on a project using react-query where I'm displaying a list. Each entry in the list consists of multiple input fields and it should be able to save just a single entry as well as possible to save all the entries at once.
While saving the data I want to display loading indicators for the elements that are being saved a retry button in case the saving fails and a success message when it works.
I see it's possible to get ahold of the MutationCache, but I can't seem to find anything about triggering mutations from outside the component where it's used.
I made a small codesandbox to illustrate the setup, otherwise my code is pasted below.
https://codesandbox.io/s/react-query-forked-5cuxgb?file=/src/Form.jsx
Form.js
import * as React from "react";
import { Person } from "./Person";
export const Form = () => {
const people = [
{
id: 1,
name: "John Doe",
age: 37
},
{
id: 2,
name: "Jack Johnson",
age: 45
},
{
id: 3,
name: "Jimmie Jones",
age: 23
}
];
const saveAll = () => {
// Trigger mutations here?
};
return (
<div>
{people.map((person) => (
<Person key={person.id} {...person} />
))}
<hr />
<button onClick={saveAll}>Save all</button>
</div>
);
};
Person.js
import * as React from "react";
import { useCreatePersonMutation } from "./useCreatePersonMutation";
export const Person = (props) => {
const { mutate, status } = useCreatePersonMutation(props.id);
return (
<div>
{status === "loading" && <span>Saving...</span>}
{status === "success" && <span>Success</span>}
{status === "error" && (
<button onClick={mutate} style={{ marginRight: 12 }}>
Retry
</button>
)}
{status === "idle" && (
<button onClick={mutate} style={{ marginRight: 12 }}>
Create Person
</button>
)}
<input value={props.name} disabled={status === "loading"} />
<input value={props.age} disabled={status === "loading"} />
</div>
);
};
useCreatePersonMutation
import { useMutation } from "react-query";
export const useCreatePersonMutation = (id) => {
return useMutation({
mutationKey: ["Create_Person", id],
mutationFn: () => new Promise((resolve) => setTimeout(resolve, 3000))
});
};

Answer 1

You can't really go into the mutation cache (queryClient.getMutationCache()) and look for existing mutations and invoke them, because mutations only "exist" once they have been invoked with .mutate or .mutateAsync.
So the mutations in your component aren't really "there yet".
The easiest solution would imo be to:
have a separate mutation that lives in the Form component
you invoke all requests in there in parallel to create all users
this will give you a separate loading state that you can either pass down to all components, or you just add one extra loading state (overlay) to the whole form while this mutation is running.

Answer 2

I ended up achieving the desired behaviour by executing a mutation for each person being saved.
const saveAll = () => {
Promise.allSettled(people.map((person) => mutateAsync(person)));
};
In the Person component that renders each row, I listen to the mutation cache and try to find the matching mutation by comparing the persons name with the name being passed to the mutation.
React.useEffect(() => {
queryClient.getMutationCache().subscribe((listener) => {
if (!listener) return;
if (listener.options?.variables.name !== name) return;
setStatus(listener.state.status);
});
}, [queryClient, name]);
This allows each Person component to show the status of the mutation. And retrying a mutation is as simple as executing the mutation.
const retry = () => {
const mutation = queryClient.getMutationCache().find({
predicate: (mutation) => mutation.options.variables.name === name
});
if (mutation) {
mutation.execute();
}
};
It doesn't scale well performance wise if you work with large lists, since each Person component gets notified about each and every mutation that gets triggered.
However the lists I work with are of limited size, so for now it seems to suit my needs.
https://codesandbox.io/s/react-query-forked-5cuxgb