T
TanStack•15mo ago
fair-rose

How to track multiple mutation invocation loading state ?

const mutation = useMutation(....)


<Row onClick={() => mutation.mutate(1)} isLoading={mutation.isLoading} />
<Row onClick={() => mutation.mutate(2)} isLoading={mutation.isLoading} />
<Row onClick={() => mutation.mutate(3)} isLoading={mutation.isLoading} />
<Row onClick={() => mutation.mutate(4)} isLoading={mutation.isLoading} />
const mutation = useMutation(....)


<Row onClick={() => mutation.mutate(1)} isLoading={mutation.isLoading} />
<Row onClick={() => mutation.mutate(2)} isLoading={mutation.isLoading} />
<Row onClick={() => mutation.mutate(3)} isLoading={mutation.isLoading} />
<Row onClick={() => mutation.mutate(4)} isLoading={mutation.isLoading} />
is there a way to track isLoading for each row correctly, and make it persist correctly even the mutation is triggered again multiple times ?
3 Replies
fair-rose
fair-roseOP•15mo ago
I think this question also applied to queries.
rising-crimson
rising-crimson•15mo ago
There are some hooks to help with this. useIsFetching, useIsMutating, and useMutationState
firm-tan
firm-tan•15mo ago
I would move the usemutation call into the Row component.

Did you find this page helpful?