Cache manipulation with paginated data
I am wondering what is the best approach for the following case:
I have a chat where messages are retrieved using useInfiniteQuery, so in a paginated fashion. Besides the REST API there is also a websocket. When receiving new messages over the websocket, what is the best way of placing them in the cache ?
The problem I'm running into is that at some point the pages get out of sync. For example if I just append new messages to the first page. As soon as the cache expires react query updates the pages page by page. So the new first page gets loaded, and now temporarily some messages are displayed twice or missing.
I'm thinking it it best to attempt to try to estimate what the new paginated data will look like and just create new pages manually? Are there any helper functions for this? Are there things I should keep in mind when manually editing the cache to create new pages?
Thanks a lot 🙂
2 Replies
conscious-sapphire•3y ago
Why would they temporarily be displayed twice? When refetching, you'll only see the update once all pages have finished fetching so that the state you see is always consistent.
xenial-blackOP•3y ago
What really??? That's awesome! I'm quite sure I saw that behavior before, but maybe that was just a stupid implementation by me then 🙂
Thx a lot for taking the time to reply, sounds like my approach wil work fine then!
- or I just looked at the XHR requests and imagined all of it -