TypeScript Demo

Pure TypeScript example showing IC Reactor without React, for Node.js or other non-React environments.

Features Demonstrated

Reactor usage without React hooks
Direct callMethod for queries and mutations
getQueryOptions() for manual query execution
Works in Node.js, Deno, or any JavaScript runtime
Command-line interface example

Links

Open in StackBlitz Edit and run in your browser

View on GitHub Browse the source code

Live Preview

Key Code

Basic Setup

import { ClientManager, Reactor } from "@ic-reactor/core"
import { QueryClient } from "@tanstack/query-core"
import { idlFactory, type _SERVICE } from "./declarations/backend"

const queryClient = new QueryClient()
const clientManager = new ClientManager({ queryClient })

const backend = new Reactor<_SERVICE>({
  clientManager,
  idlFactory,
  canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai",
})

Direct Method Calls

// Query method
const name = await backend.callMethod({
  functionName: "icrc1_name",
})
console.log("Token name:", name)

// Query with args
const balance = await backend.callMethod({
  functionName: "icrc1_balance_of",
  args: [{ owner: principal, subaccount: [] }],
})
console.log("Balance:", balance)

// Update method (mutation)
const result = await backend.callMethod({
  functionName: "icrc1_transfer",
  args: [
    {
      to: { owner: recipientPrincipal, subaccount: [] },
      amount: 100_000_000n, // 1 ICP in e8s
      fee: [],
      memo: [],
      created_at_time: [],
      from_subaccount: [],
    },
  ],
})
console.log("Transfer result:", result)

Using QueryClient Directly

// Get query options for manual execution
const queryOptions = backend.getQueryOptions({
  functionName: "icrc1_name",
})

// Execute with QueryClient
const result = await queryClient.fetchQuery(queryOptions)

// Or prefetch for later
await queryClient.prefetchQuery(queryOptions)

Installation for Non-React

pnpm add @ic-reactor/core @icp-sdk/core @tanstack/query-core