3 replies

What is the best pattern for "Pinned Items First" pagination?

❔Advice

Hi Convex community!

I’m working on a Chat UI where I need to display a list of items (Chats) with a specific sorting requirement: Pinned items must always appear at the top, followed by unpinned items. Both segments need to be paginated because the total list can be very large.

Currently, I’ve implemented this by splitting the logic into two separate paginated queries on the server and merging them on the frontend.

The Server-side Query:
I have a single query that takes a

onlyPinned

onlyPinned

boolean:

// convex/tabs.ts
export const getTabs = query({
  // ... code in photo to reduce message size
});

// convex/tabs.ts
export const getTabs = query({
  // ... code in photo to reduce message size
});

The Frontend Implementation:
I use two

usePaginatedQuery

usePaginatedQuery

hooks and concatenate the results. I handle the "infinite scroll" by checking the status of the pinned items first.

function ChatList() {
    // ... code in photo to reduce message size
}

function ChatList() {
    // ... code in photo to reduce message size
}

My Questions:
1. Is running two parallel

usePaginatedQuery

usePaginatedQuery

hooks the standard way to handle "segmented" lists like this?
2. Is there a more "Convex-native" way to do this in a single query? I've looked at

mergedStream

mergedStream

from

convex-helpers

convex-helpers

, but I'm curious if there's a pattern for a single pagination stream that transitions from one index (pinned) to another (unpinned) seamlessly.
3. Are there any performance or race-condition pitfalls with merging lists on the client side like this as the user scrolls?

Thanks for any insights!

What is the best pattern for "Pinned Items First" pagination?

Similar Threads