TanStack Router

A full-featured application demonstrating IC Reactor with TanStack Router for navigation, route loaders, and authentication.

Features Demonstrated

Route-based data prefetching with loader
getQueryOptions() for router integration
Protected routes with authentication
Query invalidation after mutations
Multiple canisters with shared ClientManager
File-based routing structure

Links

Open in StackBlitz Edit and run in your browser

View on GitHub Browse the source code

Live Preview

Key Code

Route Loader with Prefetching

// src/routes/wallet/$canisterId.tsx
export const Route = createFileRoute("/wallet/$canisterId")({
  loader: async ({ params, context }) => {
    const { queryClient, clientManager } = context

    // Create reactor for this canister
    const reactor = new DisplayReactor<Ledger>({
      clientManager,
      canisterId: params.canisterId,
      idlFactory: ledgerIdlFactory,
    })

    // Prefetch data before rendering
    await queryClient.prefetchQuery(
      reactor.getQueryOptions({ functionName: "icrc1_name" })
    )

    return { reactor }
  },
})

Using Prefetched Data

function WalletPage() {
  const { reactor } = Route.useLoaderData()

  // Data is already cached from loader!
  const { data: name } = useActorQuery({
    reactor,
    functionName: "icrc1_name",
  })

  return <h1>{name}</h1>
}