useReactorInfiniteQuery

useReactorInfiniteQuery is a React hook for paginated data fetching using a Reactor instance.

Import

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

Usage

import { useReactorInfiniteQuery } from "@ic-reactor/react"
import { backend } from "./reactor"

function Feed() {
  const { data, fetchNextPage, hasNextPage } = useReactorInfiniteQuery({
    reactor: backend, // 👈 Required
    functionName: "getPosts",
    getArgs: (pageParam) => [{ cursor: pageParam, limit: 20 }] as const,
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
  })

  return (
    <div>
      {data?.pages.map((page) => (
        // Render posts
        <div key={page.id}>{/*...*/}</div>
      ))}
      <button onClick={() => fetchNextPage()} disabled={!hasNextPage}>
        Load More
      </button>
    </div>
  )
}

Options

Required Options

Option	Type	Description
reactor	Reactor<A, T>	The Reactor instance to use
functionName	string	The canister method to call
getArgs	(pageParam) => Args	Builds the call arguments for each page
initialPageParam	TPageParam	Page param the first fetch starts from
getNextPageParam	function	Function to determine the next page param (cursor/index)

Caution

There is no args option on this hook — arguments come from getArgs, which is called for every page. getArgs and initialPageParam are both required.

Optional Options

Same as useActorInfiniteQuery.

See Also

• useActorInfiniteQuery — Bound version
• Reactor Hooks Overview