Zapytania nieskończone i stronicowanie oparte na kursorze
Wdrażaj skalowalne ładowanie list w tRPC, korzystając ze stronicowania opartego na kursorze i zapytań nieskończonych na potrzeby przewijania bez końca.
Zapytania nieskończone i stronicowanie oparte na kursorze to bezpłatna lekcja tRPC End-to-End Type Safe APIs na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej tRPC End-to-End Type Safe APIs, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs tRPC End-to-End Type Safe APIs zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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.
Ucz się tRPC End-to-End Type Safe APIs dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 10
- Lekcje
- 40
Często zadawane pytania
Czy lekcja „Zapytania nieskończone i stronicowanie oparte na kursorze” jest bezpłatna?
Tak — pełny tekst „Zapytania nieskończone i stronicowanie oparte na kursorze” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu tRPC End-to-End Type Safe APIs, przejdź na CoddyKit PRO. Kurs tRPC End-to-End Type Safe APIs zawiera 4 lekcji w sumie.
Co nauczysz się w „Zapytania nieskończone i stronicowanie oparte na kursorze”?
Wdrażaj skalowalne ładowanie list w tRPC, korzystając ze stronicowania opartego na kursorze i zapytań nieskończonych na potrzeby przewijania bez końca. Ćwiczysz tRPC End-to-End Type Safe APIs z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć tRPC End-to-End Type Safe APIs?
Nie wymagamy żadnego doświadczenia. tRPC End-to-End Type Safe APIs w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Zapytania nieskończone i stronicowanie oparte na kursorze”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji tRPC End-to-End Type Safe APIs?
Tak. Każda lekcja tRPC End-to-End Type Safe APIs zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Wydajne grupowanie żądań
- Implementacja optymistycznych aktualizacji
- Przesyłanie plików z tRPC
- Zapytania nieskończone i stronicowanie oparte na kursorze