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 StackBlitzEdit and run in your browser

View on GitHubBrowse the source code

Live Preview

Key Code

Basic Setup

src/main.ts

import { ClientManager, Reactor } from "@ic-reactor/core"
import { QueryClient } from "@tanstack/query-core"
import { ledgerIdlFactory } from "./declarations/ledger"
import type { Ledger } from "./declarations/ledger.type"

const queryClient = new QueryClient()

const clientManager = new ClientManager({
  agentOptions: { host: "https://ic0.app" },
  queryClient,
})

const ledgerReactor = new Reactor<Ledger>({
  clientManager,
  canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai",
  idlFactory: ledgerIdlFactory,
  name: "Ledger",
})

Caution

name is required on every reactor — it is what the ic_env cookie lookup and the dev-tools logging key off.

Direct Method Calls

// Query method — fetchQuery goes through the cache
const name = await ledgerReactor.fetchQuery({ functionName: "icrc1_name" })
console.log("Token name:", name)

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

// Update method (mutation)
const blockIndex = await ledgerReactor.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 block index:", blockIndex)

// Drop every cached query for this canister after a write
ledgerReactor.invalidateQueries()

Using QueryClient Directly

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

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

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

Tip

The core package (@ic-reactor/core) works without React. Use it for: - Node.js scripts and CLI tools - Server-side rendering - Non-React frameworks (Svelte, Vue, etc.) - Testing and automation

Installation for Non-React

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