await onSuccess for a mutation

[chiptus]

in useMutation page https://react-query.tanstack.com/reference/useMutation under onSuccess it's written "If a promise is returned, it will be awaited and resolved before proceeding"

I was expecting mutation.isLoading to be true until onSuccess finished running.

isn't that right?

see my codesandbox for reproduction.

also, if you see my sandbox you'll see isFetching turns true even before the mutation.isLoading is false, but it turns false after. so it's not really easy to understand how onSuccess is related to the mutation

[TkDodo]

I think the typescript types are a bit misleading. only callbacks on useMutation are awaited - the ones on .mutate are not. The reason is that .mutate can be called multiple times.

Invalidation should usually happen on the callbacks of useMutation. I have some explanations here:
https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire

[chiptus]

nice, I'll update my sandbox to show that

[siamahnaf]

@TkDodo, I found your example very helpful specially for awaiting on refetch-

const { mutate, isPending } = trpc.category.create.useMutation({
        onSuccess: (data) => {
            return utils.category.list.refetch()
        },
        onError: (error) => {
            toast.error(error.message)
        }
});

So, here as I am return invalidation request from onSuccess, it wait to resolving refetch. All is working. IsPending also stayed true while refetching.

So, I think, I will show a toast message or redirect the page after completing mutation as well as refetching. I am not finding callback function in useMutation to getting know there is complete state with mutation as well as refetching.

So you have any idea?