Preventing Multiple API Calls in useInfiniteQuery on Favorite Selection useMutation function

[DarshitChauhan]

Hello @TkDodo

I am using useInfiniteQuery to implement the "Load More" and "Load Less" functionality for rendering data. I have loaded a total of five pages.

Currently, when I select an item as a favorite from the first page (inside a child component), the useInfiniteQuery is triggered five times due to the mutation function. The same issue occurs when I remove the item from favorites.

I would appreciate your suggestions on how to prevent multiple unnecessary API calls while ensuring the data remains updated efficiently.

Thank You.

[TkDodo]

I talked about this problem here:

https://tkdodo.eu/blog/react-query-api-design-lessons-learned?page=41