Show independent loaders for child components, delete mutation
I have a list of toDos (GET /todos), with each toDo Card having a delete button(DEL /todos/id).
As soon as someone clicks on delete on a card, I want to show a loader instead of the delete button, only for that card.
The loader should be shown until the mutation is complete and the GET /todos is refetched (invalidated).
But this doesn't work as expected when multiple toDos are deleted quickly in succession.
For example - if 3 cards are deleted quickly in succession -
1 card - shows loader only until mutation is complete (not expected)
2 card - shows loader only until mutation is complete (not expected)
3 card - shows loader until mutation is complete and get /toDos is invalidated (expected)
I have returned a promise from the query invalidation, in delete mutation -
As soon as someone clicks on delete on a card, I want to show a loader instead of the delete button, only for that card.
The loader should be shown until the mutation is complete and the GET /todos is refetched (invalidated).
But this doesn't work as expected when multiple toDos are deleted quickly in succession.
For example - if 3 cards are deleted quickly in succession -
1 card - shows loader only until mutation is complete (not expected)
2 card - shows loader only until mutation is complete (not expected)
3 card - shows loader until mutation is complete and get /toDos is invalidated (expected)
I have returned a promise from the query invalidation, in delete mutation -
onSettled: async () => {
return await queryClient.invalidateQueries({ queryKey: ['todos'] })
},
