Skip to content

useActorMethod is a unified hook for calling canister methods that automatically handles both query and mutation methods based on the Candid interface. It is the bound version of useReactorMethod and is generated per-canister using createActorHooks.

  • Automatic Detection: Determines query vs mutation based on Candid annotations (query, composite_query).
  • Unified Interface: Same hook structure regardless of method type.
  • TypeScript Support: Full type safety for arguments and return types.
  • Cache Invalidation: Built-in support for invalidating queries after successful mutations.
import { createActorHooks } from "@ic-reactor/react"
const { useActorMethod } = createActorHooks(backend)

For query methods, the hook behaves like useActorQuery and fetches data on mount.

function Balance({ owner }: { owner: string }) {
const { data, isLoading, error } = useActorMethod({
functionName: "icrc1_balance_of",
args: [{ owner }],
})
if (isLoading) return <div>Loading...</div>
return <div>Balance: {data?.toString()}</div>
}

For update methods, the hook behaves like useActorMutation. Data is only fetched when you call the call function.

function Transfer() {
const { call, isPending, data } = useActorMethod({
functionName: "transfer",
invalidateQueries: [["icrc1_balance_of"]], // Optional: invalidate queries after success
})
const handleTransfer = async () => {
await call([{ to: "recipient", amount: 100n }])
alert("Transfer successful!")
}
return (
<button onClick={handleTransfer} disabled={isPending}>
{isPending ? "Transferring..." : "Transfer"}
</button>
)
}

UseActorMethodParameters extends react-query’s QueryObserverOptions, giving you access to all standard react-query options plus our custom actor options.

OptionTypeDescription
functionNameMRequired. The method name to call on the canister.
argsReactorArgs<A, M, T>Arguments to pass to the method.
callConfigCallConfigAgent call configuration (e.g., effectiveCanisterId).
queryKeyQueryKeyCustom query key for queries.
onSuccess(data) => voidCallback when the method call succeeds.
onError(error) => voidCallback when the method call fails.
invalidateQueriesQueryKey[]For mutations: keys to invalidate after success.

All react-query options are available:

OptionTypeDefaultDescription
enabledbooleantrueFor queries: whether to auto-fetch.
staleTimenumber300000How long data stays fresh (ms).
gcTimenumber300000Time before unused data is garbage collected (ms).
refetchIntervalnumber | falsefalsePolling interval in ms.
refetchOnWindowFocusbooleantrueRefetch when window regains focus.
refetchOnMountbooleantrueRefetch when component mounts.
refetchOnReconnectbooleantrueRefetch when network reconnects.
retrynumber | boolean3Number of retry attempts.
retryDelaynumber | functionexponentialDelay between retries.
networkModestring"online"Network mode ("online", "always", "offlineFirst").
placeholderDataTData | function-Placeholder data while loading.
PropertyTypeDescription
dataReactorReturnOk<A, M, T> | undefinedThe returned data from the method call.
call(args?) => Promise<data>Function to trigger the method call manually.
isLoadingbooleanWhether the method is currently executing (alias for isPending).
isPendingbooleanWhether the method is currently executing.
isErrorbooleanWhether the last call resulted in an error.
isSuccessbooleanWhether the method has completed successfully.
errorReactorReturnErr<A, M, T> | nullThe error object if one occurred.
isQuerybooleantrue if it’s a query method, false otherwise.
functionTypeFunctionType"query", "update", or "composite_query".
reset() => voidClears the state (data and error).
refetch() => PromiseFor queries: manually refetches the data.
queryResultUseQueryResultThe raw result if it’s a query.
mutationResultUseMutationResultThe raw result if it’s a mutation.