tRPC pour TypeScript : guide complet avec exemples

Qu'est-ce que tRPC et pourquoi en a-t-on besoin ?

tRPC (TypeScript Remote Procedure Call) est une bibliothèque moderne pour créer des API type-safe entre le client et le serveur. La principale caractéristique de tRPC est qu'il ne nécessite pas de génération de code ni de duplication de types. Vous écrivez simplement des fonctions sur le serveur, et le client y accède avec le support complet de TypeScript — autocomplétion, vérification des types et IntelliSense.

Contrairement à REST ou GraphQL, où vous devez décrire manuellement les schémas, les endpoints et les types, tRPC déduit automatiquement les types à partir de votre code serveur. Cela simplifie radicalement le développement et réduit le nombre d'erreurs.

Principaux avantages de tRPC :

\n
• Sécurité totale des types — les erreurs de type sont détectées à la compilation, pas à l'exécution
\n
• Absence de génération de code — pas besoin d'exécuter des générateurs ou de synchroniser des schémas
\n
• Code minimal — moins de code qu'avec REST ou GraphQL
\n
• Documentation automatique — les types servent de documentation
\n
• Simplicité — fonctionne comme un appel de fonction ordinaire
\n

tRPC est idéal pour les applications full-stack en TypeScript (Next.js, Remix, Express, Fastify) et pour l'architecture de microservices.

Installation de tRPC

tRPC se compose de plusieurs paquets. Pour une utilisation de base, vous aurez besoin de :

# Installation des parties serveur et client\nnpm install @trpc/server @trpc/client\n\n# Installation de l'adaptateur React (si vous utilisez React)\nnpm install @trpc/react-query @tanstack/react-query\n\n# Installation de l'adaptateur pour Next.js\nnpm install @trpc/next @trpc/react-query @tanstack/react-query\n\n# Installation de Zod pour la validation (recommandé)\nnpm install zod

Si vous utilisez yarn ou pnpm :

yarn add @trpc/server @trpc/client\npnpm add @trpc/server @trpc/client

Pour les développeurs Python (si vous utilisez Python côté serveur) : tRPC est une bibliothèque TypeScript, mais vous pouvez l'utiliser avec Python via trpc-py (wrapper expérimental). Cependant, l'écosystème principal est TypeScript.

Démarrage rapide avec un exemple de code

Créons une application simple : un serveur avec des procédures pour gérer les utilisateurs et un client qui les appelle.

1. Serveur (server.ts)

import { initTRPC } from '@trpc/server';\nimport { z } from 'zod';\n\n// Création d'une instance tRPC\nconst t = initTRPC.create();\n\n// Définition du type utilisateur\ninterface User {\n  id: number;\n  name: string;\n  email: string;\n}\n\n// Base de données fictive\nconst users: User[] = [\n  { id: 1, name: 'Alice', email: 'alice@example.com' },\n  { id: 2, name: 'Bob', email: 'bob@example.com' },\n];\n\n// Création du routeur avec des procédures\nconst appRouter = t.router({\n  // Procédure pour obtenir tous les utilisateurs\n  getUsers: t.procedure\n    .query(() => {\n      return users;\n    }),\n\n  // Procédure pour obtenir un utilisateur par ID\n  getUserById: t.procedure\n    .input(z.number())\n    .query(({ input }) => {\n      return users.find(user => user.id === input) || null;\n    }),\n\n  // Procédure pour créer un utilisateur\n  createUser: t.procedure\n    .input(z.object({\n      name: z.string().min(1),\n      email: z.string().email(),\n    }))\n    .mutation(({ input }) => {\n      const newUser: User = {\n        id: users.length + 1,\n        name: input.name,\n        email: input.email,\n      };\n      users.push(newUser);\n      return newUser;\n    }),\n});\n\n// Exportation du type du routeur pour le client\nexport type AppRouter = typeof appRouter;

2. Client (client.ts)

import { createTRPCClient, httpBatchLink } from '@trpc/client';\nimport type { AppRouter } from './server';\n\n// Création du client\nconst client