useMutation calls function twice when I don't have retry set up

[martinzokov]

Hi all! I've been trying out react-query for the past few days and so far it looks great. However, I am seeing a weird issue when doing a mutation. I've been following the docs here and here.
I've got the following code for a mutation:

const mutation = useMutation(postNewGoal, {
    onMutate: (goalArgs) => {
      console.log("calling mutation");
      postNewGoal(goalArgs);
    },
    onSuccess: (data, variables, contect) => {
      queryClient.invalidateQueries("goals");
    },
    retryDelay: 10000,
    retry: 0,
  });

postNewGoal is just an API call that sends an object. The issue I'm seeing is that the postNewGoal function is called twice.
I'm really confused about why this is happening. I thought it could be due to the retry features react-query provides because in the callstack I can see a call to the internal Retryer's run() method. That's when I set the retry parameter but this did not resolve it. What's more interesting is that if I use the syntax that doesn't use onMutate, onSuccess, etc callback functions... it works and is only called once.

This works fine:

  const mutation = useMutation((newGoalArgs: NewGoalArgs) => {
    let result = postNewGoal(newGoalArgs);
    queryClient.invalidateQueries("goals");
    return result;
  });

However, there is an issue with it on some occasions - the invalidateQueries call can get called before the post has finished. Meaning that for a brief period it looks as if the action was not completed and then when react-query re-fetches it's fine again.

Any idea why that might be happening and how can I use the callback format?

[martinzokov]

Ha! I figured it out... I was being a dummy and finally understood that I should not have the API call in the onMutate callback. It was calling it once as the first parameter to useMutation and a second time because of the onMutate call. I had just misunderstood the docs :) Feel free to delete this discussion.

[sankargorthi]

I ran into this today and my reason was because my mutation was in a useEffect under a strict mode react hierarchy.