useMutation response order when using invalidateQueries

[reinisg]

Hello,
I wanted to know where I need to put invalidateQueries to clean up my list, to show new list.
I have created very basic demo in codesandbox
To post data, need change email, to not duplicate data.

As you can see in code I have axios post method, mutation`s onSettled and onSuccess options.
If i put invalidateQueries into onSettled or onSuccess, it will immediately refetch and list will be the same. But if I put invalidateQueries into axios successfully response (where is console.log('response')) than it will render correctly.
Is this the right way to use invalidateQueries ?

*Token is regenerated, so that post method now wont work. (for those who will try this code)
Regards, Reinis

[TkDodo]

you are not returning the Promise from the mutationFn:

    () => {
      axios
        .post("https://gorest.co.in/public/v2/users", postObj, {
          headers: headers
        })
        .then((resp) => {
          console.log("response: ", resp);
        })
        .catch((err) => {
          console.log(" post errr", err);
        });
    },

it must be return axios.post(...)

working fork

Also, another thing I noticed: If you .catch(error) and just log it, you will transform errors into resolved promises, so you can never get to error state.

[reinisg]

Great, thank you!