0Pricing
tRPC End-to-End Type Safe APIs · Lesson

Infinite Queries and Cursor-Based Pagination

Implement scalable list loading in tRPC using cursor-based pagination and infinite queries for endless scroll.

Infinite Queries and Cursor-Based Pagination is a free tRPC End-to-End Type Safe APIs lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the tRPC End-to-End Type Safe APIs learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Not Offset Pagination?

Offset pagination (page 1, 2, 3) breaks when data changes between requests and gets slow on large tables.

Cursor-based pagination uses a pointer to the last item, staying fast and stable.

The Cursor Concept

Each page returns items plus a nextCursor, the id or timestamp of where the next page should start.

Designing the Input

The procedure accepts a limit and an optional cursor.

const input = z.object({
  limit: z.number().min(1).max(50).default(20),
  cursor: z.string().nullish(),
});

The Server Procedure

Fetch one extra item to know if there is a next page.

list: publicProcedure.input(input).query(async ({ input }) => {
  const items = await db.getItems(input.limit + 1, input.cursor);
  let nextCursor = undefined;
  if (items.length > input.limit) {
    const next = items.pop();
    nextCursor = next.id;
  }
  return { items, nextCursor };
})

Why Fetch limit + 1?

Requesting one more item than needed is a simple trick: if it exists, there is another page, and its id becomes the next cursor.

useInfiniteQuery on the Client

The React Query integration provides useInfiniteQuery tailored for this shape.

const q = trpc.item.list.useInfiniteQuery(
  { limit: 20 },
  { getNextPageParam: (last) => last.nextCursor }
);

Rendering All Pages

Flatten the loaded pages into a single list for rendering.

const items = q.data?.pages.flatMap((p) => p.items) ?? [];

Loading More

Trigger the next page when the user scrolls to the bottom.

if (q.hasNextPage) q.fetchNextPage();

Stable Ordering

Cursor pagination needs a stable sort key, usually a unique, monotonic column like an auto id or created_at, so cursors stay valid.

Bidirectional Cursors

You can also return a previousCursor to scroll backward, useful for chat-style histories.

Showing a Loading State

Use the query flags to render spinners and disable the load-more button while a page is fetching.

if (q.isFetchingNextPage) showSpinner();

Quick Check

Test your pagination knowledge.

Recap

You built scalable list loading:

  • Cursor pagination beats offset for large, changing data
  • Return items + nextCursor; fetch limit + 1 to detect more
  • Use useInfiniteQuery and flatten pages on the client

This pattern powers smooth infinite scroll experiences.

Frequently asked questions

Is the “Infinite Queries and Cursor-Based Pagination” lesson free?

Yes — the full text of “Infinite Queries and Cursor-Based Pagination” is free to read here on the web, and the tRPC End-to-End Type Safe APIs course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the tRPC End-to-End Type Safe APIs course, upgrade to CoddyKit PRO.

What will I learn in “Infinite Queries and Cursor-Based Pagination”?

Implement scalable list loading in tRPC using cursor-based pagination and infinite queries for endless scroll. You practise tRPC End-to-End Type Safe APIs with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start tRPC End-to-End Type Safe APIs?

No prior experience is required. tRPC End-to-End Type Safe APIs on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Infinite Queries and Cursor-Based Pagination” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this tRPC End-to-End Type Safe APIs lesson?

Yes. Every tRPC End-to-End Type Safe APIs lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Efficient Batching Requests
  2. Implementing Optimistic Updates
  3. File Uploads with tRPC
  4. Infinite Queries and Cursor-Based Pagination
← Back to tRPC End-to-End Type Safe APIs