useMutation onSuccess running before mutation function completes

[alexscott812]

Hi there,

I'm currently working on migrating my application to React Query and am loving it so far, but I am having some weird behavior from useMutation's onSuccess function and I cannot seem to figure out why. My mutation function takes in data to POST and a function that returns an access token (or if access token is invalid, it fetches a new access token with refresh token and returns the new access token):

const addReview = async ({ review, tokenFn }) => {
  try {
    const token = await tokenFn();
    const data = await axiosInstance.post('/reviews',
      review, {
        headers: { 
          Authorization: `Bearer ${token}` 
        }
      }
    );
    return data;
  } catch (err) {
    throw err;
  }
};

My mutation is below:

const mutation = useMutation(
    ( data ) => { addReview(data) },
    {
      onSuccess: ( data ) => {
        queryClient.refetchQueries(['shows', showId]);
      }
    }
);

const postReview = ( reviewToSubmit ) => {
  mutation.mutate({
    review: reviewToSubmit,
    tokenFn: getToken
  });
};

The onSuccess function fires after the tokenFn() api call but before the POST review api call. Logs from server are below (the second line item comes from refetchQueries in onSuccess):

POST http://localhost:5000/api/auth/refresh-token
GET http://localhost:5000/api/shows/9366be94-89c7-4f86-9f03-8b3623a999e0
POST http://localhost:5000/api/reviews

Is it not possible to have a mutation with two promises like the function above? How can I make the onSuccess wait for the whole function to complete? Any help or suggestions would be greatly appreciated.

Thanks!

[TkDodo]

Your mutation function doesn’t return anything:

( data ) => { addReview(data) }

notice the curly brackets, no return statement ;)

you want:

useMutation(( data ) => addReview(data))

or just

useMutation(addReview)