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: "list_feed",
    getArgs: (pageParam) => [{ cursor: pageParam, limit: 20 }] as const,
    initialPageParam: null as string | null,
    getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
  })

  return (
    <div>
      {data?.pages.map((page, i) => (
        // Render posts
        <div key={i}>
          {page.posts.map((post) => (
            <p key={post.id}>{post.title}</p>
          ))}
        </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) | skipToken	Builds the call arguments for each page; skipToken waits for them
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.

Notes

Caution

An update method passed here runs on the canister again on every refetch (mount, window focus, reconnect, invalidation) and retry, each time as a new call. Use it only for an update method that is safe to repeat, and use useReactorMutation or useReactorMethod for a method that changes state. With no retry hook option set, an update method retries only a SysTransient rejection, which proves the call never ran. See Update Methods in Queries.

See Also

• useActorInfiniteQuery — Bound version
• Reactor Hooks Overview