Skip to content

DisplayReactor

Defined in: display-reactor.ts:77

DisplayReactor provides automatic type transformations between Candid and display-friendly types, plus optional argument validation.

  • bigintstring (for JSON/UI display)
  • Principalstring (text representation)
  • [T] | []T | null (optional unwrapping)
  • Small blobs → hex strings

Register validators to check arguments before canister calls. Validators receive display types (strings), making them perfect for form validation.

import { DisplayReactor } from "@ic-reactor/core"
const reactor = new DisplayReactor<_SERVICE>({
clientManager,
canisterId: "...",
idlFactory,
})
// Optional: Add validation
reactor.registerValidator("transfer", ([input]) => {
if (!input.to) {
return {
success: false,
issues: [{ path: ["to"], message: "Recipient is required" }]
}
}
return { success: true }
})
// Call with display types
await reactor.callMethod({
functionName: "transfer",
args: [{ to: "aaaaa-aa", amount: "100" }], // strings!
})

A = BaseActor

The actor service type

T extends TransformKey = "display"

new DisplayReactor<A, T>(config): DisplayReactor<A, T>

Defined in: display-reactor.ts:88

DisplayReactorParameters<A>

DisplayReactor<A, T>

Reactor.constructor

readonly transform: T

Defined in: display-reactor.ts:81

Reactor.transform


readonly _actor: A

Defined in: reactor.ts:46

Phantom type brand for inference - never assigned at runtime

Reactor._actor


clientManager: ClientManager

Defined in: reactor.ts:48

Reactor.clientManager


name: string

Defined in: reactor.ts:49

Reactor.name


canisterId: Principal

Defined in: reactor.ts:50

Reactor.canisterId


service: ServiceClass

Defined in: reactor.ts:51

Reactor.service


pollingOptions: PollingOptions

Defined in: reactor.ts:52

Reactor.pollingOptions

get queryClient(): QueryClient

Defined in: reactor.ts:450

Get the query client from clientManager. This is the recommended way to access the query client for direct queries.

QueryClient

Reactor.queryClient


get agent(): HttpAgent

Defined in: reactor.ts:458

Get the agent from clientManager. This is the recommended way to access the agent for direct calls.

HttpAgent

Reactor.agent

getCodec<M>(methodName): ActorMethodCodecs<A, M> | null

Defined in: display-reactor.ts:137

Get a codec for a specific method. Returns the args and result codecs for bidirectional transformation.

M extends string

M

The name of the method

ActorMethodCodecs<A, M> | null

Object with args and result codecs, or null if not found


registerValidator<M>(methodName, validator): void

Defined in: display-reactor.ts:173

Register a validator for a specific method. Validators receive display types (strings for Principal/bigint).

M extends string

M

The name of the method to validate

DisplayValidator<A, M>

The validator function receiving display types

void

// input.to is string, input.amount is string
reactor.registerValidator("transfer", ([input]) => {
if (!/^\d+$/.test(input.amount)) {
return {
success: false,
issues: [{ path: ["amount"], message: "Must be a valid number" }]
}
}
return { success: true }
})

unregisterValidator<M>(methodName): void

Defined in: display-reactor.ts:183

Unregister a validator for a specific method.

M extends string

M

void


hasValidator<M>(methodName): boolean

Defined in: display-reactor.ts:190

Check if a method has a registered validator.

M extends string

M

boolean


validate<M>(methodName, args): Promise<ValidationResult>

Defined in: display-reactor.ts:218

Validate arguments without calling the canister. Arguments are in display format (strings for Principal/bigint). Useful for form validation before submission.

M extends string

M

The name of the method

ReactorArgs<A, M, T>

The display-type arguments to validate

Promise<ValidationResult>

ValidationResult indicating success or failure

// Validate form data before submission
const result = await reactor.validate("transfer", [{
to: formData.recipient, // string
amount: formData.amount, // string
}])
if (!result.success) {
result.issues.forEach(issue => {
form.setError(issue.path[0], issue.message)
})
}

callMethodWithValidation<M>(params): Promise<ReactorReturnOk<A, M, T>>

Defined in: display-reactor.ts:254

Call a method with async validation support. Use this instead of callMethod() when you have async validators.

M extends string

M

ReactorArgs<A, M, T>

CallConfig

Promise<ReactorReturnOk<A, M, T>>

// Async validator (e.g., check if address is blocked)
reactor.registerValidator("transfer", async ([input]) => {
const isBlocked = await checkBlocklist(input.to)
if (isBlocked) {
return {
success: false,
issues: [{ path: ["to"], message: "Address is blocked" }]
}
}
return { success: true }
})
await reactor.callMethodWithValidation({
functionName: "transfer",
args: [{ to: "...", amount: "100" }],
})

setCanisterId(canisterId): void

Defined in: reactor.ts:104

Set the canister ID for this reactor. Useful for dynamically switching between canisters of the same type (e.g., multiple ICRC tokens).

CanisterId

The new canister ID (as string or Principal)

void

// Switch to a different ledger canister
ledgerReactor.setCanisterId("ryjl3-tyaaa-aaaaa-aaaba-cai")
// Then use queries/mutations as normal
const { data } = icrc1NameQuery.useQuery()

Reactor.setCanisterId


setCanisterName(name): void

Defined in: reactor.ts:125

Set the canister name for this reactor. Useful for dynamically switching between canisters of the same type (e.g., multiple ICRC tokens).

string

The new canister name

void

// Switch to a different ledger canister
ledgerReactor.setCanisterName("icrc1")
// Then use queries/mutations as normal
const { data } = icrc1NameQuery.useQuery()

Reactor.setCanisterName


getServiceInterface(): ServiceClass

Defined in: reactor.ts:138

Get the service interface (IDL.ServiceClass) for this reactor. Useful for introspection and codec generation.

ServiceClass

The service interface

Reactor.getServiceInterface


isQueryMethod<M>(methodName): boolean

Defined in: reactor.ts:157

Check if a method is a query method (query or composite_query).

M extends string

M

boolean

Reactor.isQueryMethod


generateQueryKey<M>(params): readonly unknown[]

Defined in: reactor.ts:199

M extends string

ReactorQueryParams<A, M, T>

readonly unknown[]

Reactor.generateQueryKey


getQueryOptions<M>(params): FetchQueryOptions<ReactorReturnOk<A, M, T>>

Defined in: reactor.ts:219

M extends string

ReactorCallParams<A, M, T>

FetchQueryOptions<ReactorReturnOk<A, M, T>>

Reactor.getQueryOptions


invalidateQueries<M>(params?): void

Defined in: reactor.ts:246

Invalidate cached queries for this canister. This will mark matching queries as stale and trigger a refetch for any active queries.

M extends string

Partial<ReactorQueryParams<A, M, T>>

Optional parameters to filter the invalidation

void

// Invalidate all queries for this canister
reactor.invalidateQueries()
// Invalidate only 'getUser' queries
reactor.invalidateQueries({ functionName: 'getUser' })
// Invalidate 'getUser' query for specific user
reactor.invalidateQueries({ functionName: 'getUser', args: ['user-1'] })

Reactor.invalidateQueries


callMethod<M>(params): Promise<ReactorReturnOk<A, M, T>>

Defined in: reactor.ts:286

Call a canister method directly using agent.call() or agent.query(). This is the recommended approach for interacting with canisters.

M extends string

Omit<ReactorCallParams<A, M, T>, "queryKey">

Promise<ReactorReturnOk<A, M, T>>

// Query method
const result = await reactor.callMethod({
functionName: 'greet',
args: ['world'],
});
// Update method with options
const result = await reactor.callMethod({
functionName: 'transfer',
args: [{ to: principal, amount: 100n }],
callConfig: { effectiveCanisterId: principal },
});

Reactor.callMethod


fetchQuery<M>(params): Promise<ReactorReturnOk<A, M, T>>

Defined in: reactor.ts:359

Fetch data from the canister and cache it using React Query. This method ensures the data is in the cache and returns it.

M extends string

ReactorCallParams<A, M, T>

Promise<ReactorReturnOk<A, M, T>>

Reactor.fetchQuery


getQueryData<M>(params): ReactorReturnOk<A, M, T> | undefined

Defined in: reactor.ts:369

Get the current data from the cache without fetching.

M extends string

ReactorQueryParams<A, M, T>

ReactorReturnOk<A, M, T> | undefined

Reactor.getQueryData


subnetId(): Promise<Principal>

Defined in: reactor.ts:430

Get the subnet ID for this canister.

Promise<Principal>

Reactor.subnetId


subnetState(options): Promise<ReadStateResponse>

Defined in: reactor.ts:437

Get the subnet state for this canister.

ReadStateOptions

Promise<ReadStateResponse>

Reactor.subnetState