T
TanStack•2y ago
national-gold

mutateAsync vs mutate with options. What's the difference?

The docs on this page: https://tanstack.com/query/latest/docs/framework/react/guides/mutations#promises say "Use mutateAsync instead of mutate to get a promise which will resolve on success or throw on an error. This can for example be used to compose side effects." with the following code as an example: 
const mutation = useMutation({ mutationFn: addTodo })
try {
  const todo = await mutation.mutateAsync(todo)
  console.log(todo)
} catch (error) {
  console.error(error)
} finally {
  console.log('done')
}
const mutation = useMutation({ mutationFn: addTodo })
try {
  const todo = await mutation.mutateAsync(todo)
  console.log(todo)
} catch (error) {
  console.error(error)
} finally {
  console.log('done')
}
But given that you can pass options to the mutate function, wont this code produce the same results?: 
const mutation = useMutation({ mutationFn: addTodo });
mutation.mutate(todo, {
  onSuccess: (data) => {
    console.log(data);
  },
  onError: (error) => {
    console.error(error);
  },
  onSettled: () => {
    console.log("done");
  },
});
const mutation = useMutation({ mutationFn: addTodo });
mutation.mutate(todo, {
  onSuccess: (data) => {
    console.log(data);
  },
  onError: (error) => {
    console.error(error);
  },
  onSettled: () => {
    console.log("done");
  },
});
Is there any meaningful difference? Thanks!
TanStack Query Docs
4 Replies
optimistic-gold
optimistic-gold•2y ago
Yeah, in this example it is the same But mutateAsync returns the result as a promise which you could further use in the scope whereas mutate only provides the result in a callback
equal-jade
equal-jade•2y ago
It seems to matter when doing consecutive mutations.
stormy-gold
stormy-gold•2y ago
Another use-case keeping in mind that it returns a promise: show state messages using toasts (loading, success or error) 
toast.promise(mutation.mutateAsync(...), ...)
toast.promise(mutation.mutateAsync(...), ...)
Ref: https://sonner.emilkowal.ski/toast#promise
Toast() – Sonner
Nextra: the next docs builder
stormy-gold
stormy-gold•17mo ago
we do that at work :thumbs_Up:

Did you find this page helpful?