Aller au contenu principal
Version : 9.x 9.x

Utilisation avec Fastify

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Exemple d'application​

La meilleure façon de démarrer avec l'adaptateur Fastify est de consulter l'exemple d'application.

DescriptionLinks
  • Fastify server with WebSocket
  • Simple tRPC client in node

Utiliser tRPC avec Fastify​

Installer les dépendances​

bash
yarn add @trpc/server fastify zod
bash
yarn add @trpc/server fastify zod

Zod n'est pas obligatoire mais est utilisé dans l'exemple de routeur ci-dessous.

Créer le routeur​

Tout d'abord, vous avez besoin d'un routeur pour gérer vos requêtes, mutations et abonnements.

Un exemple de routeur est fourni ci-dessous - enregistrez-le dans un fichier router.ts.

router.ts
router.ts
ts
import * as trpc from '@trpc/server';
import { z } from 'zod';
type User = {
  id: string;
  name: string;
  bio?: string;
};
const users: Record<string, User> = {};
export const appRouter = trpc
  .router()
  .query('getUserById', {
    input: z.string(),
    async resolve({ input }) {
      return users[input]; // input type is string
    },
  })
  .mutation('createUser', {
    // validate input with Zod
    input: z.object({
      name: z.string().min(3),
      bio: z.string().max(142).optional(),
    }),
    async resolve({ input }) {
      const id = Date.now().toString();
      const user: User = { id, ...input };
      users[user.id] = user;
      return user;
    },
  });
// export type definition of API
export type AppRouter = typeof appRouter;
router.ts
ts
import * as trpc from '@trpc/server';
import { z } from 'zod';
type User = {
  id: string;
  name: string;
  bio?: string;
};
const users: Record<string, User> = {};
export const appRouter = trpc
  .router()
  .query('getUserById', {
    input: z.string(),
    async resolve({ input }) {
      return users[input]; // input type is string
    },
  })
  .mutation('createUser', {
    // validate input with Zod
    input: z.object({
      name: z.string().min(3),
      bio: z.string().max(142).optional(),
    }),
    async resolve({ input }) {
      const id = Date.now().toString();
      const user: User = { id, ...input };
      users[user.id] = user;
      return user;
    },
  });
// export type definition of API
export type AppRouter = typeof appRouter;

Si votre fichier de routeur devient trop volumineux, découpez-le en plusieurs sous-routeurs, chacun implémenté dans son propre fichier. Ensuite, fusionnez-les en un seul routeur racine appRouter.

Créer le contexte​

Ensuite, vous avez besoin d'un contexte qui sera créé pour chaque requête.

Exemple de contexte à enregistrer dans context.ts :

context.ts
context.ts
ts
import { inferAsyncReturnType } from '@trpc/server';
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 = inferAsyncReturnType<typeof createContext>;
context.ts
ts
import { inferAsyncReturnType } from '@trpc/server';
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 = inferAsyncReturnType<typeof createContext>;

Créer le serveur Fastify​

tRPC inclut nativement un adaptateur pour Fastify. Cet adaptateur vous permet de convertir votre routeur tRPC en plugin Fastify. Pour éviter les erreurs lors de requêtes batch volumineuses, assurez-vous de définir l'option maxParamLength de Fastify à une valeur appropriée, comme indiqué ci-après.

server.ts
ts
import { fastifyTRPCPlugin } from '@trpc/server/adapters/fastify';
import fastify from 'fastify';
import { createContext } from './context';
import { appRouter } from './router';
const server = fastify({
  maxParamLength: 5000,
});
server.register(fastifyTRPCPlugin, {
  prefix: '/trpc',
  trpcOptions: { router: appRouter, createContext },
});
(async () => {
  try {
    await server.listen({ port: 3000 });
  } catch (err) {
    server.log.error(err);
    process.exit(1);
  }
})();
server.ts
ts
import { fastifyTRPCPlugin } from '@trpc/server/adapters/fastify';
import fastify from 'fastify';
import { createContext } from './context';
import { appRouter } from './router';
const server = fastify({
  maxParamLength: 5000,
});
server.register(fastifyTRPCPlugin, {
  prefix: '/trpc',
  trpcOptions: { router: appRouter, createContext },
});
(async () => {
  try {
    await server.listen({ port: 3000 });
  } catch (err) {
    server.log.error(err);
    process.exit(1);
  }
})();

Vos endpoints sont maintenant disponibles via HTTP !

EndpointHTTP URI
getUserGET http://localhost:3000/trpc/getUserById?input=INPUT

where INPUT is a URI-encoded JSON string.
createUserPOST http://localhost:3000/trpc/createUser

with req.body of type User

Activer les abonnements (WebSocket)​

L'adaptateur Fastify prend en charge les abonnements via le plugin @fastify/websocket. Tout ce que vous avez à faire en plus des étapes précédentes est d'installer la dépendance, d'ajouter des abonnements à votre routeur et d'activer l'option useWSS dans le plugin. La version minimale requise de Fastify pour @fastify/websocket est 3.11.0.

Installer les dépendances​

bash
yarn add @fastify/websocket
bash
yarn add @fastify/websocket

Importer et enregistrer @fastify/websocket​

ts
import ws from '@fastify/websocket';
server.register(ws);
ts
import ws from '@fastify/websocket';
server.register(ws);

Ajouter des subscriptions​

Modifiez le fichier router.ts créé précédemment et ajoutez le code suivant :

router.ts
ts
export const appRouter = trpc
  .router()
  // .query(...)
  // .mutation(...)
  .subscription('randomNumber', {
    resolve() {
      return new Subscription<{ randomNumber: number }>((emit) => {
        const timer = setInterval(() => {
          emit.data({ randomNumber: Math.random() });
        }, 1000);
        return () => {
          clearInterval(timer);
        };
      });
    },
  });
router.ts
ts
export const appRouter = trpc
  .router()
  // .query(...)
  // .mutation(...)
  .subscription('randomNumber', {
    resolve() {
      return new Subscription<{ randomNumber: number }>((emit) => {
        const timer = setInterval(() => {
          emit.data({ randomNumber: Math.random() });
        }, 1000);
        return () => {
          clearInterval(timer);
        };
      });
    },
  });

Activer l'option useWSS​

server.ts
ts
server.register(fastifyTRPCPlugin, {
  useWSS: true,
  // ...
});
server.ts
ts
server.register(fastifyTRPCPlugin, {
  useWSS: true,
  // ...
});

C'est prêt ! Vous pouvez maintenant vous abonner au topic randomNumber et vous recevrez un nombre aléatoire chaque seconde 🚀.

Options du plugin Fastify​

nametypeoptionaldefaultdescription
prefixstringtrue"/trpc"
useWSSbooleantruefalse
trpcOptionsNodeHTTPHandlerOptionsfalsen/a