tRPC - RPC Type-Safe pour TypeScript | Glossaire

tRPC (TypeScript Remote Procedure Call) est un framework révolutionnaire qui permet de construire des APIs entièrement type-safe entre client et serveur TypeScript. Contrairement aux approches traditionnelles REST ou GraphQL, tRPC élimine le besoin de schémas, de génération de code ou de validation manuelle en exploitant directement le système de types de TypeScript. Cette approche garantit que toute modification du backend est instantanément reflétée côté frontend avec une sécurité des types complète.

Fondements de tRPC

Inférence de types automatique sans génération de code ni outils de build supplémentaires
Validation des données runtime avec Zod intégré nativement dans le système de types
Architecture RPC simplifiée où les fonctions serveur sont appelées comme des fonctions locales
Support complet de React Query, TanStack Query et autres clients de gestion d'état

Avantages stratégiques

Developer Experience exceptionnelle avec autocomplétion et détection d'erreurs en temps réel
Élimination des divergences entre contrats API et implémentations grâce au typage partagé
Réduction drastique du boilerplate comparé à REST ou GraphQL (jusqu'à 70% de code en moins)
Performance optimale avec batching automatique des requêtes et invalidation intelligente du cache
Refactoring sécurisé où renommer une route côté serveur génère des erreurs TypeScript immédiates côté client
Bundle size minimal sans overhead de runtime pour les schémas ou validateurs externes

Exemple concret d'implémentation

server/routers/user.ts

import { z } from 'zod';
import { publicProcedure, router } from '../trpc';

export const userRouter = router({
  getById: publicProcedure
    .input(z.object({ id: z.string().uuid() }))
    .query(async ({ input, ctx }) => {
      return await ctx.db.user.findUnique({
        where: { id: input.id },
        select: { id: true, name: true, email: true }
      });
    }),

  create: publicProcedure
    .input(z.object({
      name: z.string().min(2).max(50),
      email: z.string().email()
    }))
    .mutation(async ({ input, ctx }) => {
      return await ctx.db.user.create({
        data: input
      });
    })
});

client/UserProfile.tsx

import { trpc } from './trpc';

export function UserProfile({ userId }: { userId: string }) {
  // Autocomplétion complète + typage inféré du retour
  const { data, isLoading } = trpc.user.getById.useQuery({ 
    id: userId 
  });

  const createUser = trpc.user.create.useMutation({
    onSuccess: () => {
      // Invalidation type-safe du cache
      trpc.useContext().user.getById.invalidate();
    }
  });

  if (isLoading) return <div>Chargement...</div>;
  
  // TypeScript connaît la structure exacte de 'data'
  return <h1>{data?.name}</h1>;
}

Mise en œuvre progressive

Initialiser le contexte tRPC avec les dépendances (DB, auth, services)
Définir les procédures publiques/protégées avec middlewares de validation
Créer des routers modulaires par domaine métier (user, product, order...)
Configurer le client tRPC avec les adaptateurs appropriés (React Query, Next.js...)
Implémenter le batching et la gestion du cache selon les besoins de performance
Ajouter des middlewares pour logging, rate limiting et métriques
Établir une convention de nommage cohérente pour les procédures

Conseil Pro

Utilisez tRPC Panel en développement pour explorer votre API de manière interactive. Combinez tRPC avec Zod pour créer des validateurs réutilisables côté serveur ET client. Pour les équipes mixtes TypeScript/non-TypeScript, exposez un endpoint OpenAPI généré automatiquement à partir de vos routes tRPC.

Écosystème et outils complémentaires

Zod pour la validation de schémas type-safe runtime
Prisma ou Drizzle ORM pour la couche de données type-safe
TanStack Query (React Query) pour la gestion d'état asynchrone
Next.js avec App Router pour une intégration SSR/RSC native
SuperJSON pour la sérialisation avancée (Dates, Maps, Sets)
tRPC-OpenAPI pour générer de la documentation Swagger automatique
Fastify ou Express comme serveurs HTTP sous-jacents

tRPC représente un paradigme shift majeur pour les applications full-stack TypeScript en transformant la sécurité des types d'une contrainte de compilation en un avantage stratégique end-to-end. Les équipes adoptant tRPC rapportent une réduction de 60% des bugs liés aux contrats API et une vélocité de développement accrue grâce à l'élimination du boilerplate. Bien que limité aux stacks TypeScript, cette contrainte devient un atout en garantissant une cohérence totale du typage du backend au frontend.

tRPC - RPC Type-Safe pour TypeScript