TanStack Query — infinite scroll with useInfiniteQuery

Paginated lists loaded with separate useQuery calls per page require manual state for the current page and accumulated data. useInfiniteQuery handles accumulation, page tracking, and the 'load more' trigger automatically.

Use useInfiniteQuery with getNextPageParam and flatten pages for rendering:

import { useInfiniteQuery } from '@tanstack/react-query';
import { useInView } from 'react-intersection-observer';

interface Page { posts: Post[]; nextCursor: string | null; }

async function fetchPosts({ pageParam = '' }: { pageParam?: string }): Promise<Page> {
const url = pageParam ? /api/posts?cursor=${pageParam} : '/api/posts';
const res = await fetch(url);
return res.json();
}

function InfinitePostList() {
const { ref, inView } = useInView();

const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
queryKey: ['posts', 'infinite'],
queryFn: fetchPosts,
initialPageParam: '',
getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
});

// Trigger load when sentinel element enters viewport
useEffect(() => {
if (inView && hasNextPage) fetchNextPage();
}, [inView, hasNextPage, fetchNextPage]);

const allPosts = data?.pages.flatMap((page) => page.posts) ?? [];

return (
<ul>
{allPosts.map((post) => <li key={post.id}>{post.title}</li>)}
<li ref={ref}>{isFetchingNextPage ? 'Loading more...' : null}</li>
</ul>
);
}

useInfiniteQuery stores each fetched page in data.pages and exposes hasNextPage and fetchNextPage. Returning undefined from getNextPageParam signals the end of pagination and sets hasNextPage to false.