0Pricing
tRPC End-to-End Type Safe APIs · Урок

Бесконечные запросы и постраничная навигация по курсору

Реализуйте масштабируемую загрузку списков в tRPC с помощью постраничной навигации по курсору и бесконечных запросов для непрерывной прокрутки.

«Бесконечные запросы и постраничная навигация по курсору» — бесплатный урок tRPC End-to-End Type Safe APIs на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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.

Часто задаваемые вопросы

Урок «Бесконечные запросы и постраничная навигация по курсору» бесплатный?

Да — полный текст урока «Бесконечные запросы и постраничная навигация по курсору» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс 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/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать tRPC End-to-End Type Safe APIs?

Предыдущий опыт не требуется. tRPC End-to-End Type Safe APIs на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Бесконечные запросы и постраничная навигация по курсору»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке tRPC End-to-End Type Safe APIs?

Да. Каждый урок tRPC End-to-End Type Safe APIs включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Эффективная пакетная обработка запросов
  2. Реализация оптимистичных обновлений
  3. Загрузка файлов с tRPC
  4. Бесконечные запросы и постраничная навигация по курсору
← Назад к tRPC End-to-End Type Safe APIs