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.

Mastering the T: A Practical Guide to Building with tRPC v11

Let’s face it – understanding API concepts isn’t just about knowing TypeScript. It’s deeply connected to how you communicate your design decisions, collaborate with other engineers, and document your work. This section focuses on translating that technical knowledge into clear, professional English, specifically within the context of tRPC v11. We’ll explore terminology crucial for effective communication during code reviews, Slack discussions, and PR descriptions – a key element in ensuring smooth collaboration on full-stack projects.

A common frustration when introducing new technologies is the perceived complexity. Often, developers struggle to articulate why something works or how it fits into the broader system. Clear, concise language reduces ambiguity and accelerates understanding. Think about describing your API’s routing strategy – simply stating “we use routers” isn’t sufficient. You need to explain how those routes are defined, what data they handle, and how they interact with other components. This clarity is reflected in well-written PR descriptions and insightful code review comments.

For instance, imagine a situation where you’re proposing a new middleware function for authentication. Instead of just saying “this middleware handles auth,” a good description would be: “Implemented a new verifyToken middleware that utilizes JWT verification against the AuthService, ensuring only authenticated requests access the /users/:id procedure.” Notice the detail – it specifies how the middleware functions, referencing external services and clearly defining the scope of its responsibility. This level of specificity is vital for reviewers to quickly grasp your intentions and assess the potential impact.

Furthermore, effective communication extends beyond individual components. When discussing the integration of TanStack Query with tRPC, framing it as “optimizing data fetching strategies” or “reducing unnecessary API calls” conveys a strategic understanding that goes beyond just technical implementation. This ability to connect different elements within your architecture is key to demonstrating true mastery.

Let’s illustrate this with a simple code example:

// Example Middleware - Simple Rate Limiting
import { RateLimiterMiddleware } from './rateLimit';

const rateLimiter = new RateLimiterMiddleware({
  key: 'api/users',
  limit: 10,
  windowMs: 60000 // 1 minute
});

export default rateLimiter;

This demonstrates a concise explanation of a middleware function’s purpose and configuration – something easily understood during a code review. Remember, clear communication isn’t just about what you’re doing, but why you’re doing it in a way that fosters collaboration and shared understanding.

Ultimately, mastering the tRPC vocabulary is only part of the equation. It’s about confidently articulating your ideas and contributing meaningfully to a team’s overall technical strategy – turning complex code into clear communication.