Aller au contenu principal
Version : 9.x

Démarrage rapide

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 →

astuce

Nous vous encourageons vivement à consulter les exemples d'applications pour découvrir tRPC et démarrer de manière fluide.

Installation​

⚠️ Prérequis : tRPC nécessite TypeScript > 4.1 car il repose sur les Types littéraux de modèle.

npm install @trpc/server

Pour implémenter les endpoints et routeurs tRPC. Installez dans votre codebase serveur.

npm install @trpc/client @trpc/server

Pour effectuer des appels API typés depuis votre client. Installez dans votre codebase client (@trpc/server est une dépendance peer de @trpc/client).

npm install @trpc/react react-query@3

Pour générer des hooks React performants permettant d'interroger votre API tRPC. Propulsé par react-query.

npm install @trpc/next

Un ensemble d'utilitaires pour intégrer tRPC avec Next.js.

Extraits d'installation​

npm:

bash
npm install @trpc/server @trpc/client @trpc/react react-query@3 @trpc/next
bash
npm install @trpc/server @trpc/client @trpc/react react-query@3 @trpc/next

yarn:

bash
yarn add @trpc/server @trpc/client @trpc/react react-query@3 @trpc/next
bash
yarn add @trpc/server @trpc/client @trpc/react react-query@3 @trpc/next

Définition d'un routeur​

Parcourons les étapes de création d'une API typée avec tRPC. Pour commencer, cette API contiendra seulement deux endpoints :

ts
getUser(id: string) => { id: string; name: string; }
createUser(data: {name:string}) => { id: string; name: string; }
ts
getUser(id: string) => { id: string; name: string; }
createUser(data: {name:string}) => { id: string; name: string; }

Créer une instance de routeur​

Nous définissons d'abord un routeur dans notre codebase serveur :

server.ts
ts
import * as trpc from '@trpc/server';
const appRouter = trpc.router();
// only export *type signature* of router!
// to avoid accidentally importing your API
// into client-side code
export type AppRouter = typeof appRouter;
server.ts
ts
import * as trpc from '@trpc/server';
const appRouter = trpc.router();
// only export *type signature* of router!
// to avoid accidentally importing your API
// into client-side code
export type AppRouter = typeof appRouter;

Ajouter un endpoint de requête​

Utilisez la méthode .query() pour ajouter un endpoint de requête au routeur. Arguments :

.query(name: string, params: QueryParams)

  • name: string : Le nom de cet endpoint

  • params.input : Optionnel. Doit être une fonction qui valide/transforme l'input de cet endpoint et retourne une valeur fortement typée (si valide) ou lance une erreur (si invalide). Vous pouvez aussi passer un schéma Zod, Superstruct ou Yup.

  • params.resolve : Implémentation réelle de l'endpoint. Fonction prenant un unique argument req. L'input validé est disponible dans req.input et le contexte dans req.ctx (plus d'infos sur le contexte plus tard !).

server.ts
ts
import * as trpc from '@trpc/server';
const appRouter = trpc.router().query('getUser', {
  input: (val: unknown) => {
    if (typeof val === 'string') return val;
    throw new Error(`Invalid input: ${typeof val}`);
  },
  async resolve(req) {
    req.input; // string
    return { id: req.input, name: 'Bilbo' };
  },
});
export type AppRouter = typeof appRouter;
server.ts
ts
import * as trpc from '@trpc/server';
const appRouter = trpc.router().query('getUser', {
  input: (val: unknown) => {
    if (typeof val === 'string') return val;
    throw new Error(`Invalid input: ${typeof val}`);
  },
  async resolve(req) {
    req.input; // string
    return { id: req.input, name: 'Bilbo' };
  },
});
export type AppRouter = typeof appRouter;

Ajouter un endpoint de mutation​

Comme avec GraphQL, tRPC distingue les endpoints de requête et de mutation. Ajoutons une mutation createUser :

ts
createUser(payload: {name: string}) => {id: string; name: string};
ts
createUser(payload: {name: string}) => {id: string; name: string};
server.ts
ts
import * as trpc from '@trpc/server';
import { z } from 'zod';
const appRouter = trpc
  .router()
  .query('getUser', {
    input: (val: unknown) => {
      if (typeof val === 'string') return val;
      throw new Error(`Invalid input: ${typeof val}`);
    },
    async resolve(req) {
      req.input; // string
      return { id: req.input, name: 'Bilbo' };
    },
  })
  .mutation('createUser', {
    // validate input with Zod
    input: z.object({ name: z.string().min(5) }),
    async resolve(req) {
      // use your ORM of choice
      return await UserModel.create({
        data: req.input,
      });
    },
  });
export type AppRouter = typeof appRouter;
server.ts
ts
import * as trpc from '@trpc/server';
import { z } from 'zod';
const appRouter = trpc
  .router()
  .query('getUser', {
    input: (val: unknown) => {
      if (typeof val === 'string') return val;
      throw new Error(`Invalid input: ${typeof val}`);
    },
    async resolve(req) {
      req.input; // string
      return { id: req.input, name: 'Bilbo' };
    },
  })
  .mutation('createUser', {
    // validate input with Zod
    input: z.object({ name: z.string().min(5) }),
    async resolve(req) {
      // use your ORM of choice
      return await UserModel.create({
        data: req.input,
      });
    },
  });
export type AppRouter = typeof appRouter;

Prochaines étapes​

tRPC inclut des outils client plus sophistiqués conçus pour React en général et Next.js en particulier. Consultez ensuite le guide approprié :