usePaginatedQuery

usePaginatedQuery<TDocument, TCollectionSlug>(props): UsePaginatedQueryReturn<TDocument>

Defined in: packages/react/src/hooks/usePaginatedQuery.ts:132

Hook for cursor-based pagination of VexCMS collections with Load More pattern.

Manages:

• Convex cursor-based pagination using find() API
• Accumulates results across multiple Load More calls
• Extracts totalCount from first page response
• Mimics Convex usePaginatedQuery API for consistency

Type Parameters

TDocument

TDocument extends VexDocument = VexDocument

TCollectionSlug

TCollectionSlug extends string = string

Collection slug type

Parameters

props

UsePaginatedQueryProps<TDocument, TCollectionSlug>

Hook configuration

Returns

UsePaginatedQueryReturn<TDocument>

Pagination state and controls

Example

const {
  results,
  totalCount,
  isDone,
  loadMore,
  isLoading,
} = usePaginatedCollection({
  collection: "posts",
  initialNumItems: 100,
  includeTotalCount: true,
});

// Show total count in header
<p>
  {totalCount !== null && totalCount !== undefined ? (
    <>{totalCount.toLocaleString()} documents</>
  ) : (
    <>10,000+ documents</>
  )}
</p>

// Show Load More button
{!isDone && (
  <Button onClick={() => loadMore(100)} disabled={isLoading}>
    {isLoading ? "Loading..." : "Load More"}
  </Button>
)}

See

• find - Server function for querying documents
• PaginationResult - Return type with totalCount