Infinite scrolling with filters and optimistic updates using rtk query

[nick20name17]

I am using rtk query and have an implementation for infinite scrolling, this logic is implemented through offset and limit, however I also have filters and when changing any of the filters I have to reset the offset to 0.

useEffect(() => {
    setCurrentOffset(0)
}, [status, filter])

I use merge, serializeQueryArgs and forceRefetch. For serializeQueryArgs I use the arguments of this query, excluding the offset and thus when any of the filters change I get a cache update

getShopProducts: build.query<IResponseShopProductData, Partial<IQueryParams>>({
            query: queryParams => {
                const queryString = createQueryParamString(queryParams)
                return `shop-products?${queryString}`
            },
            serializeQueryArgs: ({ queryArgs }) => {
                const newQueryArgs = { ...queryArgs }

                if (newQueryArgs.offset) {
                    delete newQueryArgs.offset
                }

                return queryArgs
            },

            merge: (currentCache, newItems, { arg }) => {
                if (currentCache.results && arg.offset !== 0) {
                    return {
                        ...currentCache,
                        ...newItems,
                        results: [...currentCache.results, ...newItems.results]
                    }
                }

                return newItems
            },
            forceRefetch({ currentArg, previousArg }) {
                return currentArg !== previousArg
            },
            providesTags: result =>
                result
                    ? [
                            ...result.results.map(({ id }) => ({
                                type: 'ShopProducts' as const,
                                id
                            })),
                            'ShopProducts'
                      ]
                    : ['ShopProducts']
})

I also use optimistic updates because the data I display contains the logic of adding to favorites and I want the user to immediately see the result without reloading the entire list and resetting the filters

addWishList: build.mutation<void, IAddWishListData>({
            query: data => ({
                url: `wish-list/`,
                method: 'POST',
                body: data
            }),
            async onQueryStarted({ shop_product }, { dispatch, queryFulfilled }) {
                const patchResult = dispatch(
                    shopProducts.util.updateQueryData('getShopProducts', {}, draft => {
                        const shopProduct = draft.results.find(item => item.id === shop_product)
                        if (shopProduct) shopProduct.in_wish_list = true
                    })
                )

                try {
                    await queryFulfilled
                } catch {
                    patchResult.undo()
                }
            }
})

I'm having a conflict between my two approaches because when I make the query parameters the key for the cache then the key changes dynamically and optimistic updates don't work.

Conversely, if I use a static key for the cache such as endpointName, then resetting the cache when changing filters will not work

serializeQueryArgs: ({ endpointName }) => {
    return endpointName
},

The question is whether it is possible to do what I want and if so, what should be paid attention to?

[SyedJamal030]

Hi, so my story is that someone suggested me to use RTK-Query instead of React-Query and after some exploration I selected RTK-Query for multiple plus points of this lib. However, now my client wants me to add infinite scroll in all listing APIs and I did tried the suggestion in one of the discussions but I'm facing same problem as yours. The infinite scroll only works if you only want to list the data, and it is not working (basically the invalidate cache logic) when user updates a record.

So, I'm here adding this comment to get this discussion some attention from the responsible party #developers of RTK-Query. I really want to keep on using RTK-Query, the only problem is Infinite Scroll. The project I've implemented this in is now too big that I cannot change it to react-query. 😅 So please... ✌🏻

[markerikson]

@SyedJamal030 We have an open discussion thread asking for examples of how people would want to use infinite queries, so that we can design the proper API:

• RTKQ "infinite query" potential use cases and concerns #3174

That said, realistically I would not expect us to ship that functionality until sometime late next year. We're just now about to ship RTK 2.0 with no changes to RTKQ, then the holidays, and then sometime early next year we can start thinking about possible improvements to RTKQ.