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 onlyPinnedonlyPinned 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 usePaginatedQueryusePaginatedQuery 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 usePaginatedQueryusePaginatedQuery 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 mergedStreammergedStream from convex-helpersconvex-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?

❔Advice

// 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 usePaginatedQueryusePaginatedQuery 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
}

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

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

Continue the conversation

Convex Community

Continue the conversation

Convex Community

Similar Threads