Fastify Adapter
Example app
The best way to start with the Fastify adapter is to take a look at the example application.
Description | Links |
---|---|
|
How to use tRPC with Fastify
Install dependencies
bash
yarn add @trpc/server fastify zod
bash
yarn add @trpc/server fastify zod
Zod isn't a required dependency, but it's used in the sample router below.
Create the router
First of all you need a router to handle your queries, mutations and subscriptions.
A sample router is given below, save it in a file named router.ts
.
router.ts
router.tsts
import { initTRPC } from '@trpc/server';import { z } from 'zod';type User = {id: string;name: string;bio?: string;};const users: Record<string, User> = {};export const t = initTRPC.create();export const appRouter = t.router({getUserById: t.procedure.input(z.string()).query((opts) => {return users[opts.input]; // input type is string}),createUser: t.procedure.input(z.object({name: z.string().min(3),bio: z.string().max(142).optional(),}),).mutation((opts) => {const id = Date.now().toString();const user: User = { id, ...opts.input };users[user.id] = user;return user;}),});// export type definition of APIexport type AppRouter = typeof appRouter;
router.tsts
import { initTRPC } from '@trpc/server';import { z } from 'zod';type User = {id: string;name: string;bio?: string;};const users: Record<string, User> = {};export const t = initTRPC.create();export const appRouter = t.router({getUserById: t.procedure.input(z.string()).query((opts) => {return users[opts.input]; // input type is string}),createUser: t.procedure.input(z.object({name: z.string().min(3),bio: z.string().max(142).optional(),}),).mutation((opts) => {const id = Date.now().toString();const user: User = { id, ...opts.input };users[user.id] = user;return user;}),});// export type definition of APIexport type AppRouter = typeof appRouter;
If your router file starts getting too big, split your router into several subrouters each implemented in its own file. Then merge them into a single root appRouter
.
Create the context
Then you need a context that will be created for each request.
A sample context is given below, save it in a file named context.ts
:
context.ts
context.tsts
import { CreateFastifyContextOptions } from '@trpc/server/adapters/fastify';export function createContext({ req, res }: CreateFastifyContextOptions) {const user = { name: req.headers.username ?? 'anonymous' };return { req, res, user };}export type Context = Awaited<ReturnType<typeof createContext>>;
context.tsts
import { CreateFastifyContextOptions } from '@trpc/server/adapters/fastify';export function createContext({ req, res }: CreateFastifyContextOptions) {const user = { name: req.headers.username ?? 'anonymous' };return { req, res, user };}export type Context = Awaited<ReturnType<typeof createContext>>;
Create Fastify server
tRPC includes an adapter for Fastify out of the box. This adapter lets you convert your tRPC router into a Fastify plugin. In order to prevent errors during large batch requests, make sure to set the maxParamLength
Fastify option to a suitable value, as shown.
Due to limitations in Fastify's plugin system and type inference, there might be some issues getting for example onError
typed correctly. You can add a satisfies FastifyTRPCPluginOptions<AppRouter>['trpcOptions']
to help TypeScript out and get the correct types.
server.tsts
import {fastifyTRPCPlugin,FastifyTRPCPluginOptions,} from '@trpc/server/adapters/fastify';import fastify from 'fastify';import { createContext } from './context';import { appRouter, type AppRouter } from './router';const server = fastify({maxParamLength: 5000,});server.register(fastifyTRPCPlugin, {prefix: '/trpc',trpcOptions: {router,createContext,onError({ path, error }) {// report to error monitoringconsole.error(`Error in tRPC handler on path '${path}':` error)},} satisfies FastifyTRPCPluginOptions<AppRouter>['trpcOptions'],});(async () => {try {await server.listen({ port: 3000 });} catch (err) {server.log.error(err);process.exit(1);}})();
server.tsts
import {fastifyTRPCPlugin,FastifyTRPCPluginOptions,} from '@trpc/server/adapters/fastify';import fastify from 'fastify';import { createContext } from './context';import { appRouter, type AppRouter } from './router';const server = fastify({maxParamLength: 5000,});server.register(fastifyTRPCPlugin, {prefix: '/trpc',trpcOptions: {router,createContext,onError({ path, error }) {// report to error monitoringconsole.error(`Error in tRPC handler on path '${path}':` error)},} satisfies FastifyTRPCPluginOptions<AppRouter>['trpcOptions'],});(async () => {try {await server.listen({ port: 3000 });} catch (err) {server.log.error(err);process.exit(1);}})();
Your endpoints are now available via HTTP!
Endpoint | HTTP URI |
---|---|
getUser | GET http://localhost:3000/trpc/getUserById?input=INPUT where INPUT is a URI-encoded JSON string. |
createUser | POST http://localhost:3000/trpc/createUser with req.body of type User |
How to enable subscriptions (WebSocket)
The Fastify adapter supports subscriptions via the @fastify/websocket plugin. All you have to do in addition to the above steps is install the dependency, add some subscriptions to your router and activate the useWSS
option in the plugin. The minimum Fastify version required for @fastify/websocket
is 3.11.0
.
Install dependencies
bash
yarn add @fastify/websocket
bash
yarn add @fastify/websocket
Import and register @fastify/websocket
ts
import ws from '@fastify/websocket';server.register(ws);
ts
import ws from '@fastify/websocket';server.register(ws);
Add some subscriptions
Edit the router.ts
file created in the previous steps and add the following code:
router.tsts
import { initTRPC } from '@trpc/server';import { observable } from '@trpc/server/observable';const t = initTRPC.create();export const appRouter = t.router({randomNumber: t.procedure.subscription(() => {return observable<{ randomNumber: number }>((emit) => {const timer = setInterval(() => {emit.next({ randomNumber: Math.random() });}, 1000);return () => {clearInterval(timer);};});}),});
router.tsts
import { initTRPC } from '@trpc/server';import { observable } from '@trpc/server/observable';const t = initTRPC.create();export const appRouter = t.router({randomNumber: t.procedure.subscription(() => {return observable<{ randomNumber: number }>((emit) => {const timer = setInterval(() => {emit.next({ randomNumber: Math.random() });}, 1000);return () => {clearInterval(timer);};});}),});
Activate the useWSS
option
server.tsts
server.register(fastifyTRPCPlugin, {useWSS: true,// ...});
server.tsts
server.register(fastifyTRPCPlugin, {useWSS: true,// ...});
It's alright, you can subscribe to the topic randomNumber
and you should receive a random number every second 🚀.
Fastify plugin options
name | type | optional | default | description |
---|---|---|---|---|
prefix | string | true | "/trpc" | |
useWSS | boolean | true | false | |
trpcOptions | NodeHTTPHandlerOptions | false | n/a |