ARCHE
FamiliesDocsExamplesBlogGitHub ↗
Documentation

Start

  • Getting started
  • Philosophy

Guides

  • First hour
  • Agent context
  • Verification
  • Package managers
  • Scaffold lifecycle
  • Showcase & portfolio

Walkthroughs

  • TypeScript fullstack
  • Convex product
  • Rust API & fullstack
  • Solana family
  • Customize & experiments
  • Automation (JSON/MCP)

CLI

  • Overview
  • Flags
  • Subcommands
  • Generated output

Presets

  • Preset catalog

Stack

  • TypeScript architecture
  • Convex
  • Rust
  • Solana
  • Authentication
  • Prisma store
  • tRPC

Operations

  • Deployment
  • Environment variables
  • Workers & queues
  • CI & testing
  • Scaling
  • Security
  • Troubleshooting

Reference

  • Stack links
  • Capabilities
  • This source repo
  • Code examples
← Documentation

tRPC

How procedures, the client package, and Next.js data fetching connect.

1 min read

tRPC is the typed API layer between apps/server and apps/web. The contract package is intentionally thin.

Call paths

Loading diagram…

Where code lives

WhatWhere
Proceduresapps/server/src/modules/<feature>/*.trpc.ts
Router compositionapps/server/src/modules/trpc/app.router.ts
Client typespackages/trpc re-exports AppRouter, createCaller
Browser clientapps/web → @/trpc/client
RSC / server actionsapps/web → trpcCaller() (in-process, no HTTP loopback)

packages/trpc is not the server

Routers are not defined in packages/trpc. That package exists so the web app imports types without pulling server-only dependencies into the bundle.

Data fetching patterns

Server Components / server actions

terminal
const api = await trpcCaller()
await api.posts.list()

Client components

terminal
const { data } = trpc.posts.list.useQuery()

Use prefetch + HydrateClient when a client boundary needs the same query on first paint.

Adding a feature

  1. Create apps/server/src/modules/<feature>/
  2. Add *.trpc.ts, service, repository as needed
  3. Register router in app.router.ts
  4. Consume from web via trpc or trpcCaller

Errors and auth

Procedures use shared context for session/user. Enforce authorization in procedures or policies—do not rely on “hidden” routes.

Related: Architecture