Query infinite e paginazione basata su cursore
Implementi il caricamento scalabile delle liste in tRPC usando la paginazione basata su cursore e query infinite per lo scroll senza fine.
Query infinite e paginazione basata su cursore è una lezione tRPC End-to-End Type Safe APIs gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento tRPC End-to-End Type Safe APIs, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso tRPC End-to-End Type Safe APIs include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Domande Frequenti
La lezione «Query infinite e paginazione basata su cursore» è gratuita?
Sì — il testo completo di «Query infinite e paginazione basata su cursore» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso tRPC End-to-End Type Safe APIs, passa a CoddyKit PRO. Il corso tRPC End-to-End Type Safe APIs include 4 lezioni in totale.
Cosa imparerò in «Query infinite e paginazione basata su cursore»?
Implementi il caricamento scalabile delle liste in tRPC usando la paginazione basata su cursore e query infinite per lo scroll senza fine. Eserciti tRPC End-to-End Type Safe APIs con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare tRPC End-to-End Type Safe APIs?
Non è richiesta alcuna esperienza precedente. tRPC End-to-End Type Safe APIs su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Query infinite e paginazione basata su cursore»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione tRPC End-to-End Type Safe APIs?
Sì. Ogni lezione tRPC End-to-End Type Safe APIs include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Batching efficiente delle richieste
- Implementare aggiornamenti ottimistici
- Upload di file con tRPC
- Query infinite e paginazione basata su cursore