Loading State With Serial Mutations Flickers

[iway1]

I have some situation where I'd like to perform two mutations, one after the other. I have some loading indicator that shows when either of the queries is loading. The problem is that my loading indicator can flicker when I do this:

<Button 
    loading={mutOne.isLoading || mutTwo.isLoading}
/>

Since there's a small period of time when neither query is loading, I guess? It makes sense, but I would prefer it if there was no flicker of course.

Is there a good way to handle loading of multiple mutations performed in serial?

The only way is something like this, right?

const combinedMutation = useMutation(
    async ()=>{
        await mutOne.mutateAsync(); 
        await mutTwo.mutateAsync()
    }
);

[TkDodo]

in your case, combinedMutation.isLoading should do the trick ?

otherwise, you should be able to use onSuccess of the first useMutation and return the invocation of the second mutation there, because useMutation awaits the Promise returned from onSuccess.