onSuccess handlers order in useMutation

[denisborovikov]

Here's the situation.

We have a custom mutation hook, that makes an API request and updates the cache accordingly.

function useCreateTodo() {
  return useMutation(fetchTodos, {
    onSuccess: async (data) => {
        queryCache.setQueryData(...)
    },
  });
}

Let's say we use this hook later. We click on the button, execute the hook, and want to call a callback onAfterTodoCreated with some side effects.

const [createTodo] = useCreateTodo();

function onCreateClick(data) {
    createTodo(data, {
        onSuccess: onAfterTodoCreated,
    })
}

So here's the problem I encountered.

According to the useMutation

onSuccess
...
Fires after the mutate-level onSuccess handler (if it is defined)

the mutate-level onSuccess executes first. It means, that cache hasn't updated at this moment, because it will be updated at the hook level onSuccess later. And onAfterTodoCreated callback uses outdated data.

My suggestion is to switch the order and execute hook level handers first.
What do you think?

[denisborovikov]

@tannerlinsley Since this question never been answered and you're about to release v2 soon, let me bother you a little bit and ask to take a look in case you missed it. Sorry about that.

[tannerlinsley]

This will be fixed in 2.0

[Deanfei]

Do we have any statements on the official docs around the execution orders mentioned above? Are these orders guaranteed? We have some features that relies on the order.

[denisborovikov]

The information in the maintainer's blog can be helpful, see https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire

[TkDodo]

yes, order is guaranteed.