Managing Consistent Favorited State Across Paginated Searches with React Query

[tomerzcod7]

I have the following scenario: I have a search page with filters that query for a list of companies (based on filters).
This means I have a cache entry for a list of company results.

Now users can mark a single or multiple companies as "favorites". This means I have to update the cache for the current page, but previous pages (cache entries) that the user searched for might also contain the same company.
For example, a user can search and get a list of companies including Apple. Then do a different search and get Apple again, then mark it as a favorite.

If the user now goes back to the previous search, he will get the result from the cache and Apple won't be marked as favorite anymore.

How would you suggest approaching this? I realize I can invalidate all searches when the user marks something as favorite but this is very inefficient

[TkDodo]

I realize I can invalidate all searches when the user marks something as favorite but this is very inefficient

why is that inefficient ? You would instantly refetch the currently used query, and mark all others as stale. If you go back to a different view that has data marked as stale, it would refetch to get the latest data for that search.

[tomerzcod7]

Would you suggest this approach over just manually going over all the companies' cache entries and marking every occurrence of Apple as "favorite"? It feels a bit like a waste because it basically just changes a boolean value (the rest of the data is considered "fresh" in our eyes) that marks that company and the way this search is implemented at the moment is kind of a "heavy" operation on our servers, so we wanted to reduce unnecessary searches.

I understand this might be semantically a better and more correct approach, just feels a bit like an overkill destroying the entire companies cache over that simple mark as favorite operation

[TkDodo]

you can of course write to the cache manually. If they all have the same data structure, you can do this in one go with queryClient.setQueriesData.