redux-toolkit icon indicating copy to clipboard operation
redux-toolkit copied to clipboard

[question] - invalidate a result in cache when using "merge"

Open koukalp opened this issue 2 years ago • 28 comments

Description

I am trying to understand the right approach. Can you please give me an advice?

I am using a query enpoint with merge feature to "paginate" and keep all the results rendered on the page (clicking "next page" will display more results under those already displayed). I use the merge functionality to group all results together (along with forceRefetch and serializeQueryArgs). Which works. Now I want to be able to "remove" one of the results. Invalidating the cache (using invalidateTags or even calling api.utils.invalidateTags doesn't have the desired effect. While the query IS triggered, the cache is NOT updated and the deleted result is still displayed.

In https://redux-toolkit.js.org/rtk-query/api/createApi#merge, I read: "no automatic structural sharing will be applied - it's up to you to update the cache appropriately"

What's the recommended way of achieving it? Reading the docs, I don't see a way to achieve that. Read some SO answers about using entityAdapter or using prevPage, currentPage and nextPage, but it just sounds too complicated approach for such a simple functionality I am trying to achieve = delete a single result from the cache, identified by it's ID

My expectation (sort of what I thought would happen) I assumed the result would be invalidated the moment I define

invalidateTags: ({id}) => [{type: "Result", id }] // just illustrates what I mean

Seems, when I opt for using merge, this feature gets skipped

koukalp avatar Sep 21 '23 12:09 koukalp