React Query: Using callbacks on useMutation vs mutate itself

On this page

In a nutshell

When to use useMutation callbacks

When to use .mutate callbacks

Sources

In a nutshell

Callbacks on useMutate fire before the callbacks on mutate.
Callbacks on mutate might not fire if the component calling mutate unmounts before the mutation has finished.

When to use useMutation callbacks

For things that are absolutely necessary and logic-related (e.g., query invalidation).

When to use .mutate callbacks

For UI-related things (e.g., redirects or showing toast notifications).

const useUpdateTodo = () =>
  useMutation({
    mutationFn: updateTodo,
    //  always invalidate the todo list
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['todos', 'list'] })
    },
  })

// in the component

const updateTodo = useUpdateTodo()
updateTodo.mutate(
  { title: 'newTitle' },
  //  only redirect if we're still on the detail page
  // when the mutation finishes
  { onSuccess: () => history.push('/todos') }
)

Sources

Some callbacks might not fire – TKDodo

Tagged: React Query

In a nutshell

When to use useMutation callbacks

When to use .mutate callbacks

Sources

Leave a comment Cancel reply