useReactorMutation

useReactorMutation is a React hook for calling update methods on Internet Computer canisters using a Reactor instance. It is the raw version of useActorMutation.

Import

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

Usage

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

function CreatePost() {
  const { mutate, isPending } = useReactorMutation({
    reactor: backend, // 👈 Required
    functionName: "create_post",
  })

  return (
    <button
      onClick={() => mutate([{ title: "Hello", content: "World" }])}
      disabled={isPending}
    >
      {isPending ? "Creating..." : "Create Post"}
    </button>
  )
}

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

Return Value

Returns a TanStack Query mutation result object, same as useActorMutation.

Examples

Basic Mutation

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

function TransferButton() {
  const { mutate } = useReactorMutation({
    reactor: backend,
    functionName: "icrc1_transfer",
  })

  // Arguments are supplied at call time, not in the hook config
  return (
    <button onClick={() => mutate([{ to: { owner: recipient }, amount }])}>
      Send
    </button>
  )
}

With Callbacks

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

function useCreatePost() {
  return useReactorMutation({
    reactor: backend,
    functionName: "create_post",
    onSuccess: () => console.log("Post created!"),
  })
}

Invalidate Queries After Mutation

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

function useCreatePost() {
  return useReactorMutation({
    reactor: backend,
    functionName: "create_post",
    // Methods of `backend`, type-checked against its service. A query object,
    // a query factory or a query key works here too.
    invalidateQueries: [{ functionName: "get_posts" }],
  })
}

See Also

• useActorMutation — Bound version
• Reactor Hooks Overview