glucinater•14mo ago

UsePaginatedQuery with 1, 2, ..., n style?

I'm currently messing around with the usePaginatedQuery hook (https://docs.convex.dev/database/pagination) and am having trouble finding page-based pagination instead of just "load more". Is there a way to implement pagination that allows a user to navigate pagination through either back and next buttons or page number buttons?

Paginated Queries | Convex Developer Hub

Load paginated queries.

4 Replies

lee•14mo ago

hi! i've been thinking about writing up some examples of complex pagination patterns. to get you started with separated pages, one way is to inject page boundaries in your query:

const result = ctx.db.query("table").paginate(opts);
return {...result, page: result.page.concat(['end'])};

const result = ctx.db.query("table").paginate(opts);
return {...result, page: result.page.concat(['end'])};

and then on the client side you can split up pages

const documents = usePaginatedQuery(...);
// partition documents.page to the subarrays separated by 'end', something like this:
const firstPage = documents.results.slice(0, documents.results.indexOf('end'));

const documents = usePaginatedQuery(...);
// partition documents.page to the subarrays separated by 'end', something like this:
const firstPage = documents.results.slice(0, documents.results.indexOf('end'));

now you can call documents.loadMore(n) to create a new page.

ian•14mo ago

Doing an offset query (jumping to page N in a query) is not currently supported. However, you could have a "next page" button and progressively build up a set of page numbers, and jump back to previous pages. The sizes of the pages could change if the data in that range changed. If you use a regular useQuery rather than usePaginatedQuery, you can manage each page yourself.

glucinaterOP•14mo ago

Ah so essentially set each page as a slice of the query?

ian•14mo ago

yeah each page's query specifies the start cursor, and the data returned captures its end cursor. You can request pages of 10, but if the data in page 1 grows, that page will get bigger. this way you don't "miss" results, and your results don't jump across pages when data updates. See https://stack.convex.dev/fully-reactive-pagination and https://docs.convex.dev/database/pagination for more details

Fully Reactive Pagination

Paginating over large datasets is tricky when the data is changing. Naive approaches result in missing or duplicated data. The trick is to rewrite lim...

Paginated Queries | Convex Developer Hub

Load paginated queries.

UsePaginatedQuery with 1, 2, ..., n style?

Did you find this page helpful?