useReactorSuspenseInfiniteQuery

useReactorSuspenseInfiniteQuery is a React hook for paginated data fetching with Suspense support using a Reactor instance.

Import

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

Usage

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

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

  // data is always defined
  return (
    <div>
      {data.pages.map(page => /* ... */)}
      <button onClick={() => fetchNextPage()}>Load More</button>
    </div>
  )
}

function App() {
  return (
    <Suspense fallback="Loading feed...">
      <Feed />
    </Suspense>
  )
}

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 useActorSuspenseInfiniteQuery.

See Also

• useActorSuspenseInfiniteQuery — Bound version
• Reactor Hooks Overview