useInfiniteQueryによる無限スクロールとページネーション
ページ単位のデータを取得し、useInfiniteQueryで次のページをシームレスに読み込みます。
「useInfiniteQueryによる無限スクロールとページネーション」はCoddyKit上の無料React Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。
ようこそ
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無限クエリの再フェッチ
理解度チェック
まとめ
コース完了
よくある質問
「useInfiniteQueryによる無限スクロールとページネーション」レッスンは無料ですか？
はい。「useInfiniteQueryによる無限スクロールとページネーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。
「useInfiniteQueryによる無限スクロールとページネーション」で何を学びますか？
ページ単位のデータを取得し、useInfiniteQueryで次のページをシームレスに読み込みます。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「useInfiniteQueryによる無限スクロールとページネーション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- React QueryとQueryClientのセットアップ
- キャッシュ、Stale Time、バックグラウンド再取得
- useMutationによるMutation
- useInfiniteQueryによる無限スクロールとページネーション