0

I have an infinity scroll in my component. and I update the data in real-time using a web socket connection.

imagine I'm getting 10 items for each page and now I'm at page 2.

when I want to update one of the items in the 10 first items based on the web socket, I can not access to first 10 items because I'm on page 2, and with updateCachedDataI only have access to the result of page 2.

so how can I fix this?


page 1 = [{a: 1}, {b: 1}, {c: 1}];
page 2 = [{e: 1}, {f: 1}, {g: 1}];

when page = 2;

updateCachedData(draft => {

// draft shows [{e: 1}, {f: 1}, {g: 1}];
// but I need to update page 1 to [{a: 1}, {b: 5}, {c: 1}]
// so when the user back to page 1, he can see the updated value.

})

After reading the documentation and thanks to @markerikson I found updateQueryData but it does not fire. what am I missing?

 async onQueryStarted(
                arg,
                {
                    dispatch,
                    // getState,
                    // extra,
                    // requestId,
                    queryFulfilled
                    // getCacheEntry,
                    // updateCachedData
                }
            ) {
                try {
                    await queryFulfilled;
                    dispatch(
                        ApiSlice.util.updateQueryData('getOrderList', arg, (d) => {
                            console.log('draft', d);
                        })
                    );
                } catch (er) {
                    console.log('er', er);
                }
            },
    ```
Amir Rezvani
  • 1,262
  • 11
  • 34

1 Answers1

2

RTK Query also has an updateQueryData API util thunk, which can be dispatched with a cache key to update a specific cache entry:

markerikson
  • 63,178
  • 10
  • 141
  • 157
  • thank you for the answer I found it in the documentation. but I'm not sure I'm using it right. I'm in a situation where I have to update data in the list and if similar data dose not exist I have to add it to the cache list. but in GitHub, you said ```updateQueryData``` is just for updates not adding new data to the cache. – Amir Rezvani Feb 06 '23 at 06:13
  • 1
    Correct. As of RTK 1.9, we now have an `upsertQueryData` API (same docs page) that can be used to insert new entries as well. – markerikson Feb 07 '23 at 06:05