RTKQuery streaming, how to limit cache entries?

Question

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);

score 1 · Answer 1 · answered Apr 14 '22 at 06:35

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.

answered Apr 14 '22 at 06:35

phry

35,762
5
67
81

score 0 · Answer 2 · answered Apr 14 '22 at 10:33

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);
    })
})

RTKQuery streaming, how to limit cache entries?

2 Answers2