Using infinite query to restore and scroll to certain cursor point
Hi,
Have a question on a use case that I'm about to start implementing, but a little unsure how best to implement it with useInfiniteQuery
We basically have a thread of messages (which is list of messages in date order - think the same as a slack channel where message are displayed based on a cursor (timestamp the message was created)).
We now want to implement a way of pinning/bookmarking messages, and ultimately have a way to navigate back to the message. This means that obviously the message we want to display could be from an unfetched page and in the past.
I think I already have the scroll into view logic covered, however I've gone through the examples and past message but can't see any suggestions in terms of how based to initialise the cursor or cache in the situation, as ideally I want to avoid having two diffrent implementions or caches, i.e. list for current and a list for pass messages. As currently our single cache is updated in realtime based on a websocket messages as new message are created.
I don't currently have an example to share yet, that what I'm about to get started on building.
Any Ideas how best to implement this on the query side?
https://codesandbox.io/p/devbox/tanstack-query-example-react-infinite-query-with-max-pages-kokqjo?file=%2Fsrc%2Fpages%2Findex.js
0 Replies