M Zeeshan•4mo ago

Pagination with preloaded data

My main question is How to preload data with usePaginatedQuery
And i also want to ask... is this possible in Convex : Cursor-based pagination: allowing me to jump to a specific page using a cursor token Offset-based pagination...? current server code :

    const result = await ctx.db
      .query('skills')
      .withSearchIndex('search_type', (q) =>
        q.search('type', args.query!),
      )
      .paginate(args.paginationOpts);

    const result = await ctx.db
      .query('skills')
      .withSearchIndex('search_type', (q) =>
        q.search('type', args.query!),
      )
      .paginate(args.paginationOpts);

5 Replies

Hmza•4mo ago

checkout this i wrote https://github.com/hamzasaleem2/convex-tanstack-table/blob/main/src/useSimplePaginatedQuery.ts it has helper like this const { status, currentResults, loadNext, loadPrev, currentPageNum, setPageSize, pageSize } = useSimplePaginatedQuery(myQuery, initialArgs, { initialNumItems: 10 }); or if you want to do handle manually yourself. convex has a great helper function. check it out here https://www.npmjs.com/package/convex-helpers#manual-pagination for preloading the data. have not tried with paginated query. but reference for query is here https://docs.convex.dev/api/modules/nextjs

M ZeeshanOP•4mo ago

i tried preloadQuery with usePaginatedQuery and got type errors

Nerdkidchiki•4mo ago

https://stack.convex.dev/fully-reactive-pagination

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...

Nerdkidchiki•4mo ago

check out this convex helper You can try preloading the first batch of data in a server component with preloadQuery, you then pass that initial data to a client component that then uses usePaginatedQuery might probably have to use Tanstack query in the client compoent seeing it accepts initial data and placeholderdata

M ZeeshanOP•4mo ago

thx for your time... does tankstak query work with cursor-based pagination...? and there is only getFruits func. they didn't specify how to make offset based pagination

Pagination with preloaded data

Did you find this page helpful?