Sonsuz Sorgular ve İmleç Tabanlı Sayfalama
Sonsuz kaydırma için imleç tabanlı sayfalama ve sonsuz sorgular kullanarak tRPC'de ölçeklenebilir liste yükleme uygulayın.
Sonsuz Sorgular ve İmleç Tabanlı Sayfalama, CoddyKit'te ücretsiz bir tRPC End-to-End Type Safe APIs dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, tRPC End-to-End Type Safe APIs öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. tRPC End-to-End Type Safe APIs kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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.
Sıkça Sorulan Sorular
“Sonsuz Sorgular ve İmleç Tabanlı Sayfalama” dersi ücretsiz mi?
Evet — “Sonsuz Sorgular ve İmleç Tabanlı Sayfalama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve tRPC End-to-End Type Safe APIs kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. tRPC End-to-End Type Safe APIs kursu toplamda 4 dersten oluşur.
“Sonsuz Sorgular ve İmleç Tabanlı Sayfalama” dersinde ne öğreneceğim?
Sonsuz kaydırma için imleç tabanlı sayfalama ve sonsuz sorgular kullanarak tRPC'de ölçeklenebilir liste yükleme uygulayın. tRPC End-to-End Type Safe APIs ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
tRPC End-to-End Type Safe APIs öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te tRPC End-to-End Type Safe APIs, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Sonsuz Sorgular ve İmleç Tabanlı Sayfalama” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu tRPC End-to-End Type Safe APIs dersinde kod yazıp çalıştırabilir miyim?
Evet. Her tRPC End-to-End Type Safe APIs dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- İstekleri Verimli Biçimde Toplu İşleme
- İyimser Güncellemeleri Uygulama
- tRPC ile Dosya Yüklemeleri
- Sonsuz Sorgular ve İmleç Tabanlı Sayfalama