tRPC v11: TypeScript API Vocabulary for Full-Stack Engineers

tRPC lets you build end-to-end type-safe APIs without writing a separate schema or running a code generator. Version 11 introduced several important new patterns, including FormData support and a tighter integration with TanStack Query. If you work on full-stack TypeScript projects, the vocabulary in this post will sharpen your ability to discuss tRPC in English during code reviews, team standups, and technical interviews.

Router and Procedure Basics

router — the top-level object in tRPC that groups related procedures together, similar to a controller in MVC frameworks; routers can be nested to create a tree-shaped API.

“We split the router into three sub-routers — users, orders, and products — to keep each domain’s procedures organised.”

procedure — an individual API endpoint defined on a router; it can be a query (for reading data), a mutation (for writing data), or a subscription (for real-time streams).

“The procedure for fetching a user profile is defined as a query because it only reads from the database.”

context — a per-request object that tRPC creates and passes to every procedure, typically containing the authenticated user, a database client, or other shared resources.

“We attach the session object to the context in the createContext function so every procedure can check who is making the request.”

middleware — a function that runs before a procedure’s main handler, commonly used to check authentication, log requests, or transform the context object.

“The isAuthenticated middleware throws an UNAUTHORIZED error if the context has no user, protecting all procedures that require a logged-in session.”

Input, Output, and Validation

input validation — the step where tRPC checks the data sent by the client against a schema (usually written with Zod) before the procedure handler runs.

“Input validation rejected the request because the email field was missing the required format, saving us a database round-trip.”

output — an optional schema attached to a procedure that validates and strips the data the server sends back to the client, preventing accidental data leaks.

“We added an output schema to the user procedure to ensure the password hash is never included in the API response.”

Zod schema — a TypeScript-first validation library schema used to define the shape and constraints of tRPC procedure inputs and outputs.

“The Zod schema for the create-order input requires a positive integer quantity and a non-empty product ID string.”

Client-Side Integration

useQuery — the TanStack Query hook that tRPC wraps to let you call a query procedure from a React component with automatic caching and background refetching.

“We replaced the fetch call in the profile page with useQuery so the data is cached across navigations.”

useMutation — the TanStack Query hook tRPC wraps for calling mutation procedures, returning a mutate function along with loading and error states.

“The form calls useMutation on submit, and we show a spinner while the mutation is in a pending state.”

tanstack query adapter — the tRPC client integration that maps tRPC routers directly onto TanStack Query hooks, ensuring the TypeScript types flow through from server to component.

“Upgrading to the TanStack Query adapter in v11 removed around 200 lines of manual fetch wrapper code from our codebase.”

Advanced v11 Features

FormData procedure — a new pattern in tRPC v11 that allows a procedure to accept a standard HTML FormData object as its input, enabling file uploads and native form submissions.

“We migrated the avatar upload to a FormData procedure so the client can send files without encoding them as base64.”

httpBatchStreamLink — a tRPC client link that batches multiple procedure calls into a single HTTP request and streams the responses back as each one resolves, reducing latency.

“Switching to httpBatchStreamLink meant the page loaded faster because individual procedure results appeared as soon as they were ready.”

inferRouterInputs and inferRouterOutputs — TypeScript utility types exported by tRPC that let you extract the input and output types of your procedures without duplicating the schema definitions.

“We used inferRouterOutputs to type the data prop in our shared card component without importing the Zod schema directly.”

Practice

Open a tRPC v11 project and locate the main router definition. Try to identify and name in English at least one query procedure, one mutation procedure, and one middleware function. Write a short paragraph explaining what the middleware does and what would happen if it were removed.