Infinite Query

Shows how to implement infinite scrolling with IC Reactor using TanStack Query’s useInfiniteQuery.

Features Demonstrated

useActorInfiniteQuery for paginated data
useSuspenseInfiniteQuery for suspense-based infinite loading
Cursor-based pagination
Load more on scroll
getNextPageParam for automatic pagination

Links

Open in StackBlitz Edit and run in your browser

View on GitHub Browse the source code

Live Preview

Key Code

import { useActorInfiniteQuery } from "@ic-reactor/react"

function InfiniteList() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useActorInfiniteQuery({
      functionName: "getItems",
      initialPageParam: 0,
      getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
    })

  return (
    <div>
      {data?.pages.map((page) =>
        page.items.map((item) => <Item key={item.id} {...item} />)
      )}

      {hasNextPage && (
        <button onClick={() => fetchNextPage()} disabled={isFetchingNextPage}>
          {isFetchingNextPage ? "Loading..." : "Load More"}
        </button>
      )}
    </div>
  )
}

With Suspense

import { useActorSuspenseInfiniteQuery } from "@ic-reactor/react"

function SuspenseInfiniteList() {
  const { data, fetchNextPage, hasNextPage } = useActorSuspenseInfiniteQuery({
    functionName: "getItems",
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
  })

  // No need for loading state - Suspense handles it!
  return (
    <div>
      {data.pages
        .flatMap((page) => page.items)
        .map((item) => (
          <Item key={item.id} {...item} />
        ))}
    </div>
  )
}