Riki•2w ago

[Paginated Query] How to get the first elements in the "middle"

Context: Let's say we build a chat in a mobile app: it consists of a screen that displays messages vertically. In order to achieve this, it makes sense to have a paginated query where messages are ordered by _creationTime . Let's say a user is off for one week, have hundreds of missing messages, and open the chat. A common feature is to display the last seen message and then the new ones, and to scroll down until the most recent one. Problem: How do we do to "start" the paginated query so that it returns items started from the LAST_MESSAGE_SEEN and can scroll up or down to load more? We could load of course all the messages until the LAST_MESSAGE_SEEN , and scroll to it, but that wouldn't scale much if hundred of messages were not read, and wouldn't give the chat a snappy feeling.

// Conceptually, the message list would look like this
[...OLD_SEEN_MESSAGES, LAST_MESSAGE_SEEN, ...NEW_UNREAD_MESSAGES]

// Conceptually, the message list would look like this
[...OLD_SEEN_MESSAGES, LAST_MESSAGE_SEEN, ...NEW_UNREAD_MESSAGES]

6 Replies

Convex Bot•2w ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

lee•2w ago

good question. i would start off with two queries, and you can rearrange to share code later. One query does

ctx.db.query("messages").withIndex("by_creation_time", q=>q.lte("_creationTime", LAST_MESSAGE_SEEN)).order("desc").paginate(opts)

ctx.db.query("messages").withIndex("by_creation_time", q=>q.lte("_creationTime", LAST_MESSAGE_SEEN)).order("desc").paginate(opts)

and the other does

ctx.db.query("messages").withIndex("by_creation_time", q=>q.gt("_creationTime", LAST_MESSAGE_SEEN)).paginate(opts)

ctx.db.query("messages").withIndex("by_creation_time", q=>q.gt("_creationTime", LAST_MESSAGE_SEEN)).paginate(opts)

Then you call usePaginatedQuery twice, once on each query. the first one is [LAST_MESSAGE_SEEN, ...OLD_SEEN_MESSAGES] (ordered from newer to older), with the loadMore function loading older seen messages. The second one is [...NEW_UNREAD_MESSAGES] (ordered from older to newer), with the loadMore function loading newer unread messages

jamalsoueidan•2w ago

Take a look on getPage, https://stack.convex.dev/pagination

Take Control of Pagination

Convex offers robust control over pagination with a powerful function, getPage, enabling complex edge cases. In this article, we go over how to use th...

jamalsoueidan•2w ago

I did something like what you mention here: https://github.com/jamalsoueidan?tab=repositories Scroll down to get the latest messages just like whatsapp.

GitHub

jamalsoueidan - Repositories

Fullstack is what I do! and this is my profile. jamalsoueidan has 53 repositories available. Follow their code on GitHub.

RikiOP•2w ago

Ooooh lovely, thanks @jamalsoueidan and @lee !!

jamalsoueidan•2w ago

You welcome, I think their was article on convex that show you exactly what you want, like get from the middle, and scroll up and down to get more data, but i dont remember where its located 🔥