What is tRPC? Building Robust APIs with TypeScript and tRPC

In modern web development, ensuring smooth and efficient communication between client and server is crucial. Traditional methods often involve complex setups, multiple layers of serialization and deserialization, and potential mismatches between client and server code. 

tRPC stands out as a powerful solution to these challenges by providing typesafe APIs without the need for schemas. By leveraging TypeScript, tRPC allows developers to define APIs with end-to-end type safety, eliminating the need for separate schema definitions and reducing redundancy and potential errors. This innovative approach simplifies the development process, ensuring that both client and server stay in sync effortlessly. Let's delve deeper into the world of tRPC and explore how it simplifies communication and development.

>> Read more: gRPC vs GraphQL: Choosing the Right API Technology

What is tRPC?

tRPC (TypeScript Remote Procedure Call) is a framework that simplifies client-server communication by enabling the definition of typesafe APIs. This eliminates the need for separate schema definitions and reduces redundancy. Using tRPC offers several advantages over traditional RPC methods:

• Improved Developer Experience: Streamlines development with type safety, reducing errors and speeding up the process.
• Enhanced Performance: Potentially improves application performance due to reduced overhead and efficient communication.
• Strong Typing: Provides robust error handling and ensures data consistency between client and server.

Core Features of tRPC

tRPC offers several core features that make it an attractive choice for modern web development:

Full TypeScript Support

RPC is designed with TypeScript at its core, providing comprehensive support for type definitions across both client and server. This ensures that all parts of the application remain typesafe, significantly reducing the likelihood of type-related bugs and enhancing code maintainability. 

Simplified Data Fetching

By abstracting away much of the boilerplate associated with data fetching, tRPC makes it easier for developers to retrieve and manipulate data. This simplification not only speeds up development but also ensures that data fetching is consistent and reliable across the entire application.

Automatic Type Inference

One of the standout features of tRPC is its ability to automatically infer types. This means that developers do not need to manually define types, as tRPC intelligently deduces them from the context. This not only saves time but also enhances accuracy, ensuring that type definitions are always up-to-date and in sync with the actual data structures used in the application.

Adapters for Popular Frameworks

Adapters in tRPC play a crucial role in integrating tRPC into various frameworks seamlessly. They act as a bridge between tRPC and the specific framework, ensuring that the tRPC router can be plugged into the framework's request-handling pipeline. This allows developers to leverage the benefits of tRPC without having to overhaul their existing project structure.

Next.js Adapter

The Next.js adapter allows tRPC to be easily integrated with Next.js - a popular React framework for building server-rendered applications. The adapter makes it straightforward to set up tRPC endpoints within the Next.js API routes, ensuring smooth and typesafe communication between client and server.

// pages/api/trpc/[trpc].ts
import * as trpcNext from '@trpc/server/adapters/next';
import { appRouter } from '../../../server/router';

export default trpcNext.createNextApiHandler({
  router: appRouter,
  createContext: () => null,
});

Express Adapter

Express is a popular Node.js web framework known for its flexibility and ease of use. The Express adapter simplifies integrating tRPC with existing Express applications. It allows developers to define tRPC endpoints and plug them seamlessly into the Express request-handling pipeline.

// server.ts
import * as trpcExpress from '@trpc/server/adapters/express';
import express from 'express';
import { appRouter } from './router';

const app = express();
app.use('/trpc', trpcExpress.createExpressMiddleware({
  router: appRouter,
  createContext: () => null,
}));

app.listen(4000, () => {
  console.log('Server listening on port 4000');
});

Fastify Adapter

Fastify is another popular Node.js framework known for its high performance and focus on plugins. The Fastify adapter makes it easy to integrate tRPC with Fastify projects. Developers can leverage Fastify's plugin system to effortlessly add tRPC functionality to their applications.

// server.ts
import * as trpcFastify from '@trpc/server/adapters/fastify';
import Fastify from 'fastify';
import { appRouter } from './router';

const fastify = Fastify();

fastify.register(trpcFastify.plugin, {
  prefix: '/trpc',
  trpcOptions: { router: appRouter, createContext: () => null },
});

fastify.listen(4000, (err) => {
  if (err) throw err;
  console.log('Server listening on port 4000');
});

These adapters simplify the integration of tRPC with existing projects by providing out-of-the-box support for popular frameworks. This means developers can leverage tRPC’s typesafe, schema-free API capabilities without having to significantly alter their existing codebase. By using the appropriate adapter, developers can quickly and easily add tRPC to their projects, ensuring a smooth and efficient development process with minimal setup and configuration.

This approach not only accelerates the integration process but also ensures that developers can continue to use the tools and frameworks they are already familiar with, thereby enhancing productivity and maintaining consistency across the project.

Advanced Features for Robust APIs

Middleware

Middleware in tRPC functions similarly to middleware in other web frameworks, acting as a series of processing steps that occur before a request reaches the final procedure or handler. Middleware can be used to add functionality such as authentication, logging, or request transformation. Middleware in tRPC is defined at the router level and can be composed to create complex request handling logic.

We can use Middleware for various purposes:

• Authentication:

Middleware can be used to ensure that only authenticated users can access certain procedures. By checking the request's authentication token and validating it, middleware can either allow the request to proceed or return an error if the user is not authenticated.

import * as trpc from '@trpc/server';

const isAuthenticated = trpc.middleware(async ({ ctx, next }) => {
  if (!ctx.user) {
    throw new trpc.TRPCError({ code: 'UNAUTHORIZED' });
  }
  return next();
});

const appRouter = trpc.router()
  .middleware(isAuthenticated)
  .query('getUser', {
    resolve: ({ ctx }) => {
      return ctx.user;
    },
  });

• Request Transformation:

Middleware can modify the request or context before it reaches the procedure. For example, it can add default values, sanitize inputs, or enrich the context with additional data.

const addDefaults = trpc.middleware(async ({ ctx, next }) => {
  ctx.default = 'default value';
  return next();
});

const appRouter = trpc.router()
  .middleware(addDefaults)
  .query('getDefault', {
    resolve: ({ ctx }) => {
      return ctx.default;
    },
  });

Data Validation with Zod

tRPC leverages the power of TypeScript and Zod (a schema declaration and validation library) to simplify data validation on both the server and the client. By using Zod schemas, developers can define the shape and constraints of the data, ensuring that only valid data is processed by the server. This validation occurs seamlessly as part of the tRPC procedure definitions, providing a consistent and typesafe approach to handling data.

• Server-Side Validation:

On the server side, tRPC uses Zod schemas to validate the input of each procedure. This ensures that incoming data conforms to the expected format before the procedure logic is executed.

import * as trpc from '@trpc/server';
import { z } from 'zod';

// Define a Zod schema for input validation
const userInputSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  age: z.number().min(0, 'Age must be a positive number'),
});

const appRouter = trpc.router()
  .query('createUser', {
    input: userInputSchema,
    resolve: ({ input }) => {
      // Input is guaranteed to be valid at this point
      return `User ${input.name} created, age ${input.age}`;
    },
  });

export type AppRouter = typeof appRouter;

• Client-Side Validation:

Zod can also be used for client-side validation, providing immediate feedback to users and preventing invalid data from being sent to the server. Here's an example:

import { createTRPCClient, TRPCProvider, trpc } from '@trpc/react';
import { httpBatchLink } from '@trpc/client';
import { z } from 'zod';
import type { AppRouter } from './server';

// Define the client
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:4000/trpc',
    }),
  ],
});

// Define a Zod schema for the input
const userInputSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  age: z.number().min(0, 'Age must be a positive number'),
});

const App = () => {
  const { mutate, error } = trpc.useMutation('createUser');

  const handleSubmit = (input: { name: string; age: number }) => {
    const parsedInput = userInputSchema.safeParse(input);
    if (!parsedInput.success) {
      console.error('Validation failed:', parsedInput.error.errors);
      return;
    }
    mutate(parsedInput.data);
  };

  return (
    <div>
      {error && <p>Error: {error.message}</p>}
      <form
        onSubmit={(e) => {
          e.preventDefault();
          const formData = new FormData(e.currentTarget);
          const name = formData.get('name') as string;
          const age = Number(formData.get('age'));
          handleSubmit({ name, age });
        }}
      >
        <div>
          <label htmlFor="name">Name:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="age">Age:</label>
          <input type="number" id="age" name="age" required min="0" />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

ReactDOM.render(
  <TRPCProvider client={client}>
    <App />
  </TRPCProvider>,
  document.getElementById('root')
);

>> Read more about TypeScript:

• Tutorial on TypeScript Decorators with Real Examples
• Mastering 8 TypeScript Utility Types For Better Code

Conclusion

tRPC offers a typesafe, minimal-boilerplate alternative to REST and GraphQL, particularly well-suited for TypeScript developers. It combines the simplicity of REST with the type safety and some of the flexibility of GraphQL, making it an attractive option for modern web development where TypeScript is heavily used.

While REST and GraphQL have well-established ecosystems and broad language support, tRPC's seamless integration with TypeScript and focus on developer experience present a compelling case for its adoption in projects where these factors are prioritized.

Ready to explore tRPC? Check out the official documentation (https://trpc.io/docs/quickstart) to learn more about its features and implementation details.