React Query: Execution order of useMutation side effects

Today I learned, what is the actual order of execution of React Query useMutation side effects.

Given a mutation like this:

  const mutation = useMutation(
    (id) => {
      console.log('Mutation callback')
      return toggleTodo(id)
    },
    {
      onMutate: () => {
        console.log('onMutate')
      },
      onSuccess: () => {
        console.log('onSuccess')
        queryClient.invalidateQueries('todos')
      },
      onSettled: () => {
        console.log('onSettled')
      },
    },
  )

I was expecting the order of execution to be:

// ❌ Wrong
Mutation callback
onMutate
onSuccess
onSettled

But it's actually:

// ✅ Correct
onMutate
Mutation callback
onSuccess
onSettled

This behavior is described in the documentation:

onMutate - This function will fire before the mutation function is fired and is passed the same variables the mutation function would receive

References

React Query Docs - Mutations
CodeSandbox with example above

React Query: Execution order of useMutation side effects

Comments

Today I Learned

React: Detect a click outside an element

More from this blog

How to split string to strings of equal length in JavaScript?

Advent of Code - preparing input data

Improve your problem solving skills with Advent of Code

How to add overlay color to <img />

How to query image dimensions from Sanity?

References

Command Palette

Comments

Today I Learned

React: Detect a click outside an element

More from this blog

References