What is the difference between onSuccess and .then?

[cmacdonnacha]

I was wondering what the difference between these 2 approaches below are. My scenario is that I redirect to another page on successful mutation 200 OK, so i don't really need to do anything with the response data.

Approach 1: Using mutateAsync and .then

  const { mutateAsync } = useMutation(payload =>
    FetchAPI.post(`/account`, payload),
  );

mutateAsync(accountId)
   .then(() => {
      // Re-direct to another url here
      window.location.href = 'someUrl'
    })
   .catch(error => {
     // Do something 
    });

Approach 2: Using mutate and onSuccess

const { mutate } = useMutation(payload =>
  FetchAPI.post(`/account`, payload),
);

mutate(payload, {
  onSuccess: () => {
    // Re-direct to another url here
    window.location.href = 'someUrl'
  },
  onError: (error) => {
    // Do something
  },
})

[TkDodo]

there isn't really any. It's just that if you use mutateAsync, you have to catch errors yourselves, or you'll get an unhandled promise rejection. Most of the time, having access to the actual promise is not necessary - unless you want to fire off multiple things concurrently. So you can just call .mutate and work with the callbacks.

if you look at how mutate is implemented - it's literally mutateAsync with a .catch(noop) attached and it doesn't return the promise, but keeps it to itself :)

[cmacdonnacha]

Great thanks