Paginate a Convex query on the server with paginationOptsValidator and consume it in React with usePaginatedQuery

Documented steps

1. Import paginationOptsValidator from "convex/server" in your Convex query function file.
2. Declare the query args as { paginationOpts: paginationOptsValidator, ...anyOtherFilterArgs } alongside the usual v validators.
3. Build an ordered query, e.g. ctx.db.query("messages").withIndex(...).order("desc"), then call .paginate(args.paginationOpts) on it.
4. Return the resulting PaginationResult (optionally after mapping/filtering its `page` array) — it contains `page` (documents for this page), `continueCursor` (string marking where the next page starts), and `isDone` (whether all results are exhausted).
5. On the React client call usePaginatedQuery(api.module.functionName, { ...otherArgs }, { initialNumItems: N }) — do not pass paginationOpts yourself; the hook supplies and manages it.
6. Read `results`, `status` (one of "LoadingFirstPage", "CanLoadMore", "LoadingMore", "Exhausted") and `isLoading` from the hook to drive loading/empty/end-of-list UI.
7. Call the hook's loadMore(n) function to fetch the next page of n additional items.
8. Outside React, paginate manually: call the paginated query repeatedly, passing the previous response's continueCursor into the next call's paginationOpts, until isDone is true.
9. Optionally set maximumBytesRead and/or maximumRowsRead on the pagination options to cap how much data a single page load may scan.
10. Run npx convex dev so the deployment URL is available and the client can subscribe to the paginated query.
11. Official docs: https://docs.convex.dev/database/pagination