tRPC : API typées de bout en bout en TypeScript

Introduction à tRPC : Une Révolution dans le Développement d'API Typées

Dans le monde du développement web moderne, les API jouent un rôle crucial dans la communication entre le client et le serveur. À mesure que les applications deviennent de plus en plus complexes, la nécessité d'une communication fluide et fiable entre le frontend et le backend devient primordiale. Avec l'essor de TypeScript, qui offre des fonctionnalités de typage statique, les développeurs cherchent des solutions qui garantissent une expérience de développement sans erreur. C'est ici que tRPC entre en jeu, proposant des API typées de bout en bout qui assurent une intégration optimale avec TypeScript. tRPC est une bibliothèque qui permet aux développeurs de créer des API sans avoir à écrire de schémas REST ou GraphQL. S'appuyant sur la puissance de TypeScript, tRPC fournit une expérience de développement où les types sont propagés entre le client et le serveur. Cela réduit considérablement les erreurs potentielles et augmente la productivité, permettant aux équipes de se concentrer sur la logique métier plutôt que sur la gestion des types.

Qu'est-ce que tRPC ?

tRPC se distingue par sa capacité à construire des API de manière simple et efficace tout en utilisant TypeScript. Contrairement à d'autres solutions qui nécessitent la création de fichiers de schéma, tRPC se base sur la définition de procédures qui sont typées automatiquement. Voici quelques caractéristiques clés : - **Typage complet** : Chaque appel d'API est vérifié à la compilation, garantissant que les types sont cohérents entre le client et le serveur. - **Pas de schéma** : Pas besoin de définir des schémas comme avec REST ou GraphQL. - **Flexibilité** : Compatible avec tout framework JavaScript moderne. - **Performances** : Minimisation des surcharges de communication grâce à une architecture simplifiée.

Architecture et Fonctionnement

tRPC utilise une approche centrée sur les procédures. Chaque procédure est définie dans un fichier TypeScript, et les types sont propagés de manière transparente entre le client et le serveur.

// Serveur: Définition d'une procédure simple
import { initTRPC } from '@trpc/server';

const t = initTRPC.create();

export const appRouter = t.router({
  greet: t.procedure
    .input((val: unknown) => {
      if (typeof val !== 'string') throw new Error('Invalid input');
      return val;
    })
    .query((opts) => {
      return `Hello, ${opts.input}`;
    }),
});

export type AppRouter = typeof appRouter;

// Client: Appel de la procédure
import { createTRPCProxyClient } from '@trpc/client';
import type { AppRouter } from './path/to/server';

const trpc = createTRPCProxyClient();

const greetMessage = await trpc.greet.query('World');
console.log(greetMessage); // "Hello, World"

Avantages de l'utilisation de tRPC

L'utilisation de tRPC offre plusieurs avantages qui aident les équipes de développement à créer des applications robustes et maintenables.

Simplicité et Rapidité de Développement

Avec tRPC, les développeurs peuvent se concentrer sur le développement de la logique métier sans se soucier des erreurs de type. Le typage automatique entre le client et le serveur réduit le besoin de tests manuels et améliore la qualité du code.

Élimination des Schémas

En éliminant le besoin de schémas explicites, tRPC simplifie le processus de développement et réduit la complexité. Les développeurs peuvent créer des API plus rapidement sans la surcharge de gestion des schémas.

Intégration Transparente avec TypeScript

L'intégration transparente avec TypeScript permet aux équipes de tirer parti des fonctionnalités avancées de typage statique, ce qui se traduit par une meilleure gestion des erreurs et une expérience de développement plus cohérente.

Comparaison avec d'autres Solutions

Pour comprendre où tRPC se positionne, il est utile de le comparer à d'autres solutions populaires comme REST et GraphQL.

Caractéristique	tRPC	REST	GraphQL
Typage	Statique et complet	Manuel	Géré par le schéma
Schéma	Pas nécessaire	URI-defined	Nécessaire
Flexibilité	Haute	Moyenne	Haute
Performances	Optimales	Variable	Variable

Bonnes Pratiques avec tRPC

Pour tirer le meilleur parti de tRPC, il est essentiel d'adopter certaines bonnes pratiques.

Utilisation Correcte des Types

Assurez-vous d'utiliser les fonctionnalités de typage de TypeScript pour définir clairement les types de données que vos procédures manipulent. Cela contribue à réduire les erreurs et à améliorer la maintenabilité.

Sécurisation des Procédures

Bien que tRPC simplifie le développement, il est crucial de sécuriser vos API. Implémentez des vérifications d'entrée rigoureuses et utilisez des mécanismes d'authentification appropriés.

Structuration du Code

Organisez votre code de manière à le rendre lisible et maintenable. Séparez les procédures logiquement et utilisez des conventions de nommage cohérentes pour améliorer la compréhension du code.

Conseil pro : Profitez des fonctionnalités d'analyse de code de TypeScript pour détecter les erreurs potentielles avant même l'exécution. Cela vous permet d'identifier et de corriger les problèmes rapidement.

Pièges Courants et Comment les Éviter

Comme avec toute technologie, il existe des pièges courants à éviter lors de l'utilisation de tRPC.

Mauvaise Gestion des Erreurs

Un piège courant est de ne pas gérer correctement les erreurs. Assurez-vous de gérer les exceptions de manière appropriée dans vos procédures pour éviter les comportements inattendus.

Complexité Cachée

Bien que tRPC simplifie le développement d'API, il est possible de créer des procédures trop complexes. Gardez vos procédures simples et directes pour éviter la confusion et la difficulté de maintenance.

Cas d'Usage Réels

tRPC est utilisé avec succès dans de nombreuses applications modernes. Voici quelques exemples concrets.

Applications SaaS

Dans les applications SaaS, tRPC est utilisé pour créer des interfaces utilisateur réactives et dynamiques en réduisant la latence des appels API.

Prototypage Rapide

Les startups utilisent tRPC pour prototyper rapidement des fonctionnalités et tester des idées sans la surcharge de gestion de schémas complexes.

Conclusion : Pourquoi Choisir tRPC ?

tRPC représente une avancée significative dans le développement d'API moderne. En offrant une intégration transparente avec TypeScript et en éliminant la nécessité de schémas explicites, tRPC simplifie le processus de développement tout en améliorant la qualité du code. Pour les équipes cherchant à construire des applications robustes et évolutives, tRPC est une solution attrayante qui mérite d'être envisagée sérieusement. En résumé, tRPC permet aux développeurs de se concentrer sur ce qui compte le plus : la création de fonctionnalités innovantes et performantes, tout en assurant une communication fiable et typée entre le client et le serveur.

Construire un routeur tRPC complet

tRPC brille particulièrement dans les applications fullstack TypeScript (Next.js, Remix) où le backend et le frontend partagent la même base de code. Voyons comment construire un routeur complet avec authentification et validation.

Définir les procédures avec Zod

// server/routers/article.ts
import { z } from 'zod';
import { router, publicProcedure, protectedProcedure } from '../trpc';
import { TRPCError } from '@trpc/server';

const articleSchema = z.object({
  title:   z.string().min(5).max(255),
  content: z.string().min(100),
  slug:    z.string().regex(/^[a-z0-9-]+$/),
  tags:    z.array(z.string()).max(5),
});

export const articleRouter = router({
  // Query publique : liste des articles
  list: publicProcedure
    .input(z.object({
      page:     z.number().min(1).default(1),
      limit:    z.number().min(1).max(50).default(10),
      category: z.string().optional(),
    }))
    .query(async ({ input, ctx }) => {
      return await ctx.db.article.findMany({
        where:   input.category ? { category: input.category } : {},
        skip:    (input.page - 1) * input.limit,
        take:    input.limit,
        orderBy: { createdAt: 'desc' },
      });
    }),

  // Mutation protégée : créer un article
  create: protectedProcedure
    .input(articleSchema)
    .mutation(async ({ input, ctx }) => {
      const existing = await ctx.db.article.findUnique({
        where: { slug: input.slug }
      });
      if (existing) {
        throw new TRPCError({
          code: 'CONFLICT',
          message: 'Un article avec ce slug existe déjà',
        });
      }
      return ctx.db.article.create({
        data: { ...input, authorId: ctx.session.user.id },
      });
    }),
});

Utilisation côté client avec React Query

// components/ArticleList.tsx
import { trpc } from '../utils/trpc';

export function ArticleList() {
  const { data, isLoading, error } = trpc.article.list.useQuery({
    page: 1,
    limit: 10,
    category: 'javascript',
  });

  const createArticle = trpc.article.create.useMutation({
    onSuccess: () => {
      // Invalider le cache pour recharger la liste
      utils.article.list.invalidate();
    },
  });

  if (isLoading) return 
Chargement...
;
  if (error) return 
Erreur : {error.message}
;

  return (
    

      {data?.map(article => (
        
{article.title}
      ))}
    
  );
}

Conseil pro : Activez superjson comme transformer tRPC pour supporter nativement les types Date, Map, Set et BigInt entre le serveur et le client — sans conversion manuelle.

tRPC vs REST vs GraphQL : lequel choisir ?

Critère	tRPC	REST	GraphQL
Type safety E2E	✅ Native TypeScript	⚠️ Manuel (OpenAPI)	✅ Avec codegen
Courbe d'apprentissage	Faible	Très faible	Élevée
Flexibilité client	Faible (même repo)	Haute	Très haute
Performance	Excellente	Très bonne	Bonne
Équipes multiples	Difficile	Idéal	Idéal
Monorepo TypeScript	Idéal	Possible	Possible