Description
Hi @BenQoder, I am currently facing a problem with mutation in rtk query pagination scenario. Request you to provide input for the same.
I have a notification data displayed to the user. I have used rtk query to fetch data based on the page index passed from the component.
My requirement is to mark the individual notification messages as Read. I have an API to fetch notification data page by page.
I am using infinite scroll with flatlist. Maintaining pageState variable which will be incremented based on onEndReached prop of Flaltlist.
If the user scrolls to page 2 and again scrolls up to page 1, invalidating the cache is resulting in page 2 query invoked by the RTK query.
providesTags: (result, error, page) => {
return result
? [
// Provides a tag for each post in the current page,
// as well as the 'PARTIAL-LIST' tag.
...result?.items.map(({id}) => ({type: 'Notifications', id})),
{type: 'Notifications', id: 'PARTIAL-LIST'},
]
: [{type: 'Notifications', id: 'PARTIAL-LIST'}];
},
Invalidating -
invalidatesTags: (result, error, id) => {
const {notifications} = id;
const notId = notifications[0];
return [{type: 'Notifications', notId}];
},
Please let me know how to approach mutation of endpoints in an infinite scroll page.