T
TanStack•13mo ago
protestant-coral

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
protestant-coral
protestant-coralOP•13mo ago
I think this question also applied to queries.
stormy-gold
stormy-gold•13mo ago
There are some hooks to help with this. useIsFetching, useIsMutating, and useMutationState
metropolitan-bronze
metropolitan-bronze•13mo ago
I would move the usemutation call into the Row component.

Did you find this page helpful?