tRPC End-to-End Type Safe APIs · レッスン

無限クエリとカーソルベースのページネーション

カーソルベースのページネーションと無限クエリを使い、エンドレススクロールに対応したスケーラブルなリスト読み込みをtRPCで実装します。

レッスン 4/413 ステップ

「無限クエリとカーソルベースのページネーション」はCoddyKit上の無料tRPC End-to-End Type Safe APIsレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはtRPC End-to-End Type Safe APIs学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 tRPC End-to-End Type Safe APIsコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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.

無料で開始

AI チューターと学ぶ tRPC End-to-End Type Safe APIs — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 10
レッスン: 40

無料で学習を始めるコース全体を表示

よくある質問

「無限クエリとカーソルベースのページネーション」レッスンは無料ですか？

はい。「無限クエリとカーソルベースのページネーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、tRPC End-to-End Type Safe APIsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 tRPC End-to-End Type Safe APIsコースには全4レッスンが含まれています。

「無限クエリとカーソルベースのページネーション」で何を学びますか？

カーソルベースのページネーションと無限クエリを使い、エンドレススクロールに対応したスケーラブルなリスト読み込みをtRPCで実装します。ブラウザで直接実行するハンズオンコードでtRPC End-to-End Type Safe APIsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

tRPC End-to-End Type Safe APIsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのtRPC End-to-End Type Safe APIsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「無限クエリとカーソルベースのページネーション」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このtRPC End-to-End Type Safe APIsレッスンでコードを書いて実行できますか？

はい。すべてのtRPC End-to-End Type Safe APIsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← tRPC End-to-End Type Safe APIsに戻る