'RTKQuery streaming, how to limit cache entries?

So I implemented a websocket using this pattern https://redux-toolkit.js.org/rtk-query/usage/streaming-updates

it works fine but my issue is that I would like to limit the total entries to 30 (websocket is sending a lot, and fast). I would need a queue like FIFO to keep my list updated but limited. What would be the pattern to do that , how should I write it ?

EDIT:

I came up with the solution same you suggested, do you think this implementation is ok? (actually it works very well)

const currentCache = getCacheEntry();
if(currentCache.data && currentCache.data.ids.length === MAX_ENTRY) {
    const toRemove = currentCache.data.ids[0]
    nearTxAdapter.removeOne(draft, toRemove);
}
nearTxAdapter.addOne(draft, data);
rtk-query


Solution 1:[1]

Every time you .push() an item into the array in updateQueryResults, check if length is now over 30 and also call .unshift() on the array?

You don't need any special tools for doing that.

Solution 2:[2]

phry direction is the right one , here is a working implementation example:

lastTransferTxSocket.on('token-tx', (tx) => {
    const data:TokenTxInterface = JSON.parse(tx);
    updateCachedData((draft) => {
        const currentCache = getCacheEntry();
        if(currentCache.data && currentCache.data.ids.length === MAX_ENTRY) {
            const toRemove = currentCache.data.ids[0]
            tokenTxAdapter.removeOne(draft, toRemove);
        }
        tokenTxAdapter.addOne(draft, data);
    })
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 phry
Solution 2 François Richard

Related Questions