Adaptateur Express

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

Description	Links
Express server & procedure calls with Node.js.	CodeSandbox Source

Comment ajouter tRPC à un projet Express existant

1. Installer les dépendances

bash
yarn add @trpc/server zod

bash
yarn add @trpc/server zod

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

Agents IA

Si vous utilisez un agent de codage IA, installez les compétences tRPC pour une meilleure génération de code :

bash
npx @tanstack/intent@latest install

bash
npx @tanstack/intent@latest install

2. Créer un routeur tRPC

Implémentez votre routeur tRPC. Un exemple de routeur est fourni ci-dessous :

server.ts
ts
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
 
export const t = initTRPC.create();
 
export const appRouter = t.router({
  getUser: t.procedure.input(z.string()).query((opts) => {
    opts.input; // string
    return { id: opts.input, name: 'Bilbo' };
  }),
  createUser: t.procedure
    .input(z.object({ name: z.string().min(5) }))
    .mutation(async (opts) => {
      // use your ORM of choice
      return { id: '1', ...opts.input };
    }),
});
 
// export type definition of API
export type AppRouter = typeof appRouter;

server.ts
ts
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
 
export const t = initTRPC.create();
 
export const appRouter = t.router({
  getUser: t.procedure.input(z.string()).query((opts) => {
    opts.input; // string
    return { id: opts.input, name: 'Bilbo' };
  }),
  createUser: t.procedure
    .input(z.object({ name: z.string().min(5) }))
    .mutation(async (opts) => {
      // use your ORM of choice
      return { id: '1', ...opts.input };
    }),
});
 
// export type definition of API
export type AppRouter = typeof appRouter;

Si votre routeur devient trop volumineux, découpez-le en sous-routeurs autonomes dans des fichiers séparés, puis fusionnez-les dans un routeur racine appRouter.

3. Utiliser l'adaptateur Express

tRPC inclut un adaptateur pour Express prêt à l'emploi. Cet adaptateur vous permet de convertir votre routeur tRPC en middleware Express.

server.ts
ts
import { initTRPC } from '@trpc/server';
import * as trpcExpress from '@trpc/server/adapters/express';
import express from 'express';
 
// created for each request
const createContext = ({
  req,
  res,
}: trpcExpress.CreateExpressContextOptions) => ({}); // no context
type Context = Awaited<ReturnType<typeof createContext>>;
 
const t = initTRPC.context<Context>().create();
const appRouter = t.router({
  // [...]
});
 
const app = express();
 
app.use(
  '/trpc',
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext,
  }),
);
 
app.listen(4000);

server.ts
ts
import { initTRPC } from '@trpc/server';
import * as trpcExpress from '@trpc/server/adapters/express';
import express from 'express';
 
// created for each request
const createContext = ({
  req,
  res,
}: trpcExpress.CreateExpressContextOptions) => ({}); // no context
type Context = Awaited<ReturnType<typeof createContext>>;
 
const t = initTRPC.context<Context>().create();
const appRouter = t.router({
  // [...]
});
 
const app = express();
 
app.use(
  '/trpc',
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext,
  }),
);
 
app.listen(4000);

Vos endpoints sont maintenant disponibles via HTTP !

Endpoint	HTTP URI
getUser	GET http://localhost:4000/trpc/getUser?input=INPUT where INPUT is a URI-encoded JSON string.
createUser	POST http://localhost:4000/trpc/createUser with req.body of type {name: string}