Avancez vite sans rien casser. Des APIs end-to-end typesafe, simplifiées.

Découvrez toute la puissance de l'inférence TypeScript pour booster la productivité de votre application full-stack.

Étoile

Démarrage rapide

Supported by

22 more

Many thanks to all of our amazing sponsors!

Sécurité de typage automatique

Modification côté serveur ? TypeScript vous avertira des erreurs côté client avant même d'enregistrer le fichier !

DX rapide

tRPC ne nécessite aucune étape de build ou compilation : pas de génération de code, de surcharge à l'exécution ni d'étape de construction.

Indépendant des frameworks

Compatible avec tous les frameworks et environnements d'exécution JavaScript. Facile à intégrer à vos projets existants.

Autocomplétion

Utiliser tRPC équivaut à utiliser un SDK pour le code serveur de votre API, vous offrant une confiance totale dans vos endpoints.

Taille de bundle légère

tRPC n'a aucune dépendance et une empreinte client minime, ce qui le rend extrêmement léger.

Tout inclus

Nous fournissons des adaptateurs pour React, Next.js, Express, Fastify, AWS Lambda, Solid, Svelte et bien d'autres.

Utilisé par

tRPC est éprouvé et approuvé par les principales équipes techniques et de nombreuses entreprises du Fortune 500.

Simple à utiliser avec
une expérience développeur inégalée

Il est rapide et facile de démarrer avec tRPC pour construire une API type-safe.

ts
const t = initTRPC.create();
 
const router = t.router;
const publicProcedure = t.procedure;
 
const appRouter = router({
  greeting: publicProcedure
    .input(z.object({ name: z.string() }))
    .query((opts) => {
      const { input } = opts;
               const input: {
    name: string;
}
 
      return `Hello ${input.name}` as const;
  }),
});
 
export type AppRouter = typeof appRouter;

ts
const t = initTRPC.create();
 
const router = t.router;
const publicProcedure = t.procedure;
 
const appRouter = router({
  greeting: publicProcedure
    .input(z.object({ name: z.string() }))
    .query((opts) => {
      const { input } = opts;
               const input: {
    name: string;
}
 
      return `Hello ${input.name}` as const;
  }),
});
 
export type AppRouter = typeof appRouter;

Définir vos procedures

La première étape pour créer une API tRPC est de définir vos procedures.

Les procedures sont les fonctions utilisées pour construire votre backend. Elles sont composable et peuvent être des queries, mutations ou subscriptions. Les routers contiennent plusieurs procedures.

Dans cette procedure, nous utilisons un validateur Zod pour garantir que les données d'entrée correspondent exactement au format attendu. Nous renvoyons également une chaîne de texte simple depuis la query.

À la fin du fichier, nous exportons le type du router pour l'utiliser côté frontend quelques instants plus tard.

ts
const { listen } = createHTTPServer({
  router: appRouter,
});
 
// The API will now be listening on port 3000!
listen(3000);

ts
const { listen } = createHTTPServer({
  router: appRouter,
});
 
// The API will now be listening on port 3000!
listen(3000);

Créer votre serveur HTTP

Ensuite, nous créons notre serveur HTTP en utilisant notre appRouter. Nous avons maintenant un serveur tRPC opérationnel !

tRPC propose de nombreux adaptateurs pour s'intégrer à votre environnement : Next.js, Express, l'API Fetch (Astro, Remix, SvelteKit, Cloudflare Workers, etc.), Fastify, AWS Lambda, ou un serveur HTTP Node standard.

ts
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });

ts
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });

Connectez votre client et commencez à interroger !

Maintenant que le serveur est opérationnel, nous pouvons créer un client et commencer à interroger les données.

Nous spécifions le type AppRouter lors de la création du client pour bénéficier de l'autocomplétion TypeScript et d'Intellisense correspondant à l'API backend, sans aucune génération de code !

Essayez-le par vous-même !

Node.js

React

Next.js

Ceci est une application Node.js minimale utilisant tRPC.

Loading sandbox...

⚠️

Heads up!

WebContainers require modern Web APIs that likely aren't supported by your browser. Either open this page in a Chrome, or download this sandbox from StackBlitz and run it locally.

You can dismiss this warning to see the code, although you'll likely see unexpected errors.

Open in StackBlitz

Utiliser ce modèle

Vous n'avez peut-être pas besoin d'une API traditionnelle

"J'ai créé tRPC pour permettre aux développeurs de move faster en supprimant le besoin d'une couche API traditionnelle, tout en conservant la certitude que nos applications resteront stables lors d'itérations rapides."
Essayez-le et dites-nous ce que vous en pensez !