Query Demo

This example demonstrates the current factory APIs in @ic-reactor/react against live ledger canisters:

createSuspenseQuery for static method wrappers
createSuspenseQueryFactory for runtime arguments
createMutation for updates and invalidation
DisplayReactor for UI-friendly string values

Links

Open in StackBlitzEdit and run in your browser

View on GitHubBrowse the source code

Live Preview

Key Code

// An excerpt of src/reactor.ts: the demo also sets up ckBTC and ckETH the same
// way, and formats each token's balance with a `formatBalance` helper
import {
  createMutation,
  createSuspenseQuery,
  createSuspenseQueryFactory,
  defineDisplayReactor,
  formatTokenAmount,
} from "@ic-reactor/react"
import { ledgerIdlFactory, type Ledger } from "./declarations/ledger"

export const { reactor: icpReactor } = defineDisplayReactor<Ledger>({
  name: "icp",
  canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai",
  idlFactory: ledgerIdlFactory,
  agentOptions: { host: "https://ic0.app" },
})

export const icpNameQuery = createSuspenseQuery(icpReactor, {
  functionName: "icrc1_name",
})

// The balance is e8s as text: formatTokenAmount shifts it by the decimals
export const getIcpBalance = createSuspenseQueryFactory(icpReactor, {
  functionName: "icrc1_balance_of",
  refetchInterval: 5 * 1000, // 5 seconds
  select: (balance) => `${formatTokenAmount(balance, 8)} ICP`,
})

export const icpTransferMutation = createMutation(icpReactor, {
  functionName: "icrc1_transfer",
  // Every ICP balance getIcpBalance has returned, whatever the account: a
  // transfer changes the sender's and the recipient's
  invalidateQueries: [getIcpBalance],
})