ICP Reactor Demo

This example provides a comprehensive overview of a full local ICP project: a backend canister, a frontend using the reactor and hooks the Vite plugin generates, Authentication and TanStack Query.

Features Demonstrated

• Generated Hooks: The Vite plugin generates a DisplayReactor and its hooks (useBackendQuery, useBackendMutation, …) from the backend’s Candid.
• Authentication Hooks: Integration with Internet Identity for secure calls.
• Typed Methods: Fully typed query and mutation calls.
• Error Propagation: Robust handling of canister errors and network issues.

Links

Open in StackBlitzEdit and run in your browser

View on GitHubBrowse the source code

Live Preview

Implementation

frontend/src/App.tsx

import { useState } from "react"
import { useAuth } from "./lib/client"
import { useBackendQuery } from "./generated/backend"

function GreetSection() {
  const { login, logout, isAuthenticated } = useAuth()
  const [name, setName] = useState("World")

  // `greet` is a query: the hook fetches it, and again whenever `name` changes
  const {
    data: greeting,
    isLoading,
    refetch,
  } = useBackendQuery({
    functionName: "greet",
    args: [name],
  })

  return (
    <div>
      {isAuthenticated ? (
        <button onClick={() => logout()}>Logout</button>
      ) : (
        <button onClick={() => login()}>Login</button>
      )}
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={() => refetch()}>Greet</button>
      {isLoading ? <p>Loading...</p> : <p>{greeting}</p>}
    </div>
  )
}