การเลื่อนแบบไม่สิ้นสุดและการแบ่งหน้า ด้วย useInfiniteQuery

ยินดีต้อนรับ

useInfiniteQuery คืออะไร

การตั้งค่าพื้นฐาน

const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
  queryKey: ['posts'],
  queryFn: ({ pageParam }) =>
    fetch('/api/posts?cursor=' + pageParam).then(r => r.json()),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
});

getNextPageParam

getNextPageParam: (lastPage, allPages) => {
  return lastPage.hasMore ? lastPage.nextCursor : undefined;
}

การแสดงผลทุกหน้า

const allPosts = data.pages.flatMap(page => page.items);

return (
  <ul>
    {allPosts.map(post => <li key={post.id}>{post.title}</li>)}
  </ul>
);

ปุ่มโหลดเพิ่มเติม

<button
  onClick={() => fetchNextPage()}
  disabled={!hasNextPage || isFetchingNextPage}
>
  {isFetchingNextPage ? 'Loading...' : hasNextPage ? 'Load More' : 'No more posts'}
</button>

การเลื่อนแบบไม่สิ้นสุดด้วย IntersectionObserver

const observerRef = useRef();
useEffect(() => {
  const observer = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting && hasNextPage) fetchNextPage();
  });
  if (observerRef.current) observer.observe(observerRef.current);
  return () => observer.disconnect();
}, [hasNextPage, fetchNextPage]);

<div ref={observerRef} />  {/* sentinel at bottom */}

การเลื่อนแบบไม่สิ้นสุดสองทิศทาง

การแบ่งหน้าแบบหน้าเทียบกับเคอร์เซอร์

// Offset-based
getNextPageParam: (lastPage) => lastPage.page + 1

การดึงข้อมูลคิวรีแบบไม่สิ้นสุดใหม่

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน

เรียนจบหลักสูตร