useReactorQuery

useReactorQuery is a React hook for fetching data from Internet Computer canisters using a Reactor instance. It is the raw version of useActorQuery that requires explicit reactor passing.

Import

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

Usage

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

function UserProfile({ userId }: { userId: string }) {
  const { data, isPending, error } = useReactorQuery({
    reactor: backend, // 👈 Required
    functionName: "get_user",
    args: [userId],
  })

  if (isPending) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return <div>{data?.name}</div>
}

Options

Required Options

Option	Type	Description
reactor	Reactor<A, T>	The Reactor instance to use
functionName	string	The canister method to call

Optional Options

Same as useActorQuery.

Return Value

Returns a TanStack Query result object, same as useActorQuery.

Examples

Basic Query

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

function Greeting() {
  const { data } = useReactorQuery({
    reactor: backend,
    functionName: "greet",
    args: ["World"],
  })

  return <span>{data}</span>
}

Waiting for Args

args takes TanStack Query’s skipToken while the arguments are not known; see useActorQuery:

import { skipToken, useReactorQuery } from "@ic-reactor/react"
import { backend } from "./reactor"

function UserName({ userId }: { userId: string | undefined }) {
  const { data } = useReactorQuery({
    reactor: backend,
    functionName: "get_user",
    args: userId ? [userId] : skipToken,
  })

  return <span>{data?.name}</span>
}

Type-Safe Queries

TypeScript infers types from the passed reactor instance:

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

function User() {
  const { data } = useReactorQuery({
    reactor: backend,
    functionName: "get_user", // ✅ Autocompletes valid methods
    args: ["user-123"], // ✅ Type-checked
  })

  return <span>{data?.name}</span>
}

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

• useActorQuery — Bound version
• useReactorSuspenseQuery — Suspense version
• Reactor Hooks Overview