คำค้นไม่สิ้นสุดและการแบ่งหน้าโดยใช้เคอร์เซอร์
นำการโหลดรายการขนาดใหญ่ไปใช้ใน tRPC ด้วยการแบ่งหน้าโดยใช้เคอร์เซอร์และคำค้นไม่สิ้นสุดสำหรับการเลื่อนดูต่อเนื่อง
คำค้นไม่สิ้นสุดและการแบ่งหน้าโดยใช้เคอร์เซอร์ เป็นบทเรียน tRPC End-to-End Type Safe APIs ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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.
คำถามที่พบบ่อย
บทเรียน “คำค้นไม่สิ้นสุดและการแบ่งหน้าโดยใช้เคอร์เซอร์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “คำค้นไม่สิ้นสุดและการแบ่งหน้าโดยใช้เคอร์เซอร์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 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 ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การแบ่งคำขอเป็นชุดอย่างมีประสิทธิภาพ
- การปรับปรุงข้อมูลเชิงคาดการณ์
- การอัปโหลดไฟล์ด้วย tRPC
- คำค้นไม่สิ้นสุดและการแบ่งหน้าโดยใช้เคอร์เซอร์