Clarifications about useMutation

[n1ghtmare]

I was hoping someone could clarify something for me. I'm not entirely sure what is the point of useMutation, I'm sure I'm missing something.

Is there any difference between the 3 versions below as far as react-query is concerned?

v1

const [mutate] = useMutation(addTodo, {
  onSuccess: () => {
    queryCache.refetchQueries('todos');
    queryCache.refetchQueries('reminders');
  },
});

await mutate(todo);

and v2

const [mutate] = useMutation(addTodo);

try {
    await mutate(todo);
    queryCache.refetchQueries('todos');
    queryCache.refetchQueries('reminders');
} 
catch {
    // something went wrong
}

and v3

try {
    await addTodo(todo);
    queryCache.refetchQueries('todos');
    queryCache.refetchQueries('reminders');
}
catch {
    // something went wrong
}

Thanks for your help.

[tannerlinsley]

useMutation is indeed built from similar control flow you have shown here, but it's built this way so that you can be more terse and declarative with your mutation-side effects where you declare your mutation logic instead of having to handle that control flow yourself in a try/catch/finally block. When you see an example like optimistic updates and rollbacks using onMutate, onError and onSuccess and all of the variable mapping that goes on between them, it's more clear that you would not want to write that on your own every time you need it, nor would I expect many to want to have to set up this logic on their own in some type of promise wrapper.

Other useful features beyond this are:

• Automatically ignores side-effects and state changes due to outdated mutations
• Allowing defaults to be set and composed for side-effects via the config provider, useMutation instance and even overridden at the callsite level with the mutate-function overrides
• Support for error boundaries and suspense out of the box

[patelnets]

First of all thanks a lot for the library, its awesome!!!

I was wondering if the support for suspense for mutations is on the road map any time soon?

[TkDodo]

I don't think that makes a lot of sense conceptually.

[patelnets]

Would you be able to briefly explain why please?

[TkDodo]

suspense is made as fallback ui while data is fetching. how does this relate to mutations? I fetch a todo list, suspend for the first fetch, then show data. Then click a checkbox to mark a todo as done. What now? Show a spinner instead of the todo list? "Unmount" the checkbox and show a spinner instead ?

[n1ghtmare]

Thanks for the detailed explanation, much appreciated. I didn't realize that among other things useMutation has a support for Suspense as well, I couldn't find anything about it in the examples, but I'll play around a bit and try to figure it out. Also, yes, I see how if you want to do optimistic updates of the cache, you would need something like useMutation, it makes sense.

Also, while, you're here and you're being kind to answer my questions, I'll go ahead and ask one more (sorry).

I'm currently copying data returned by useQuery into local component state. When I do a mutation to said data, I update it locally and call queryCache.refetchQueries(...). Am I going at this the wrong way? Should I instead work with only the query cache (i.e. - not copy data into local state) and update the cache as needed. Can you recommend an approach, or perhaps point me to some write-up?

I'm sorry I know this is a bit general, but I would appreciate some expert guidance.

[tannerlinsley]

If you are copying data into state so that you can edit it as a draft for some mutation payload then that is expected. When you send off the mutation and it succeeds, you should refetch the original query that it affected, then if necessary, use the new response to again copy into your editable state.

[n1ghtmare]

The reason I asked in the first place is, because that's what I currently have (contrived example with pseudo-code just to illustrate the point).

async function fetchTodos() {
    // fetch all todos
}

async function deleteTodo(id) {
    // delete a single todo
}

function TodoList() {
    const [todos, setTodos] = useState(todo);

    // queries -> will use suspense higher in the app (so no need for status)
    const {data} = useQuery("todos", fetchTodos, {suspense: true});

    // mutations
    const [deleteMutation] = useMutation(deleteTodo, {
        onSuccess: () => {
            queryCache.refetchQueries("todos");
        }
    });

    // get the todos into local state
    useEffect(() => {
        setTodos(data.todos);
    }, [data]);

    async function handleDelete(id) {
        // set the state of a single item as being deleted
        setTodos(todos.map(x => ({...x, isDeleting: x.id === id })));

        await deleteMutaion(id);

        // we're done, remove the item from state
        setTodos(todos.filter(x => x.id !== id));
    }

    return (
        <div>
            {todos.map(x => (
                <div>
                    {x.title} <button onClick={() => handleDelete(x.id)}>delete</button>
                </div>
            ))}
        </div>
    );
}

Is this idiomatic react-query usage? You see, in this specific example, I wasn't sure why I would need the mutation hook at all. I could just run queryCache.refetchQueries("todos") at the end of the handleDelete function. I see now that it would be useful if I do an optimistic update of the cache, but if I don't?

Right, now everything works great, and I'm probably overthinking this, but I just wanted to ensure I'm using the library as intended and to its full potential.

Also, when I get some free time, I would like to build a "full-fledged" codesanbox of a Todo app for newbs like me, with queries, mutations, suspense - all the jazz.

[tannerlinsley]

You're right that here, you could just do it on your own and it would be exactly the same. The mutation features will come in handy though when you:

• Start showing todo state in some other place in the app simultaneously
• Extract out the mutation logic to be it's own custom hook

[n1ghtmare]

Yeah, ok, your second point makes a lot of sense, I didn't even think about that!

Can you clarify the first point though? Do you mean (optimistically) update the todos in the query cache so that the data would be immediately available to all components in the app that depend on it (without waiting for the re-fetch to complete)?

[tannerlinsley]

Yep! You wouldn't want to have to share your local state copy with the rest of the app or global state.

[n1ghtmare]

Cool! Thank you for all the answers! It’s all clear now!

[sshmyg]

@tannerlinsley
Hello. How could I cache mutation, and then restore it, when it will fire next time?
To get same flow as I have with useQuery? To be consistent.

Or probably better approach use useQuery. And handle it via additional inner state. Like this

const [formData, setFormData] = useState()


const { data } = useQuery(['login', formData], loginApi, {
    enabled: !!formData
});

const handleLogin = useCallback((data) => {
    setFormData(data)
}, []);


<form action="" onSubmit={handleLogin}>
    ...
</form>

Then there is one more question, why do we need useMutation, if we could do anything with useQuery, and get cache by default?

Thank you.