Entièrement typé avec tRPC

Découvrez tRPC et comment il peut nous aider à appeler à distance des fonctions backend côté client à l’aide de l’inférence TypeScript pour travailler rapidement et efficacement avec l’API.

Lorsque nous commençons notre parcours d’apprentissage de la programmation, la première chose que nous remarquons est qu’il existe de nombreux termes et abréviations. Il semble qu’un tas de mots soient assemblés au hasard, et dans notre tête, nous commençons à penser : « Qu’est-ce que c’est et pourquoi devrais-je l’utiliser ?

L’une des choses qui peuvent être les plus difficiles à apprendre est ce que sont les API et comment les créer. Chaque développeur doit rechercher de nombreuses façons de créer des API fiables et évolutives. Cela fait partie de nos vies, que cela nous plaise ou non. Chaque application possède une API qui fait fonctionner les choses sous le capot.

Les API peuvent être difficiles à créer pour plusieurs raisons. L’une des raisons les plus importantes est la vitesse à laquelle le développement logiciel évolue au fil du temps. Les bibliothèques et les frameworks utilisés aujourd’hui peuvent devenir peu fiables pour de nombreuses raisons en peu de temps. La documentation est un autre problème lorsque nous parlons d’API ; la documentation est essentielle pour nous aider à comprendre le fonctionnement de l’API et les bonnes façons de l’utiliser.

Surtout lorsque nous utilisons TypeScript pour créer des API, il est difficile de maintenir la concision entre l’API et l’application Web qui l’utilise. Parfois, nous devons modifier quelque chose sur l’API qui pourrait casser notre application.

Aujourd’hui, nous aborderons le tRPC et comment il peut nous aider à avancer rapidement et à ne rien casser en utilisant TypeScript. Il s’agit d’une bibliothèque légère permettant d’appeler à distance des fonctions backend côté client. Cela nous permet d’utiliser l’inférence TypeScript pour rendre la communication entre le backend et le frontend plus productive.

tRPC : bougez rapidement et ne cassez rien

tRPC signifie TypeScript Remote Procedure Call et permet aux développeurs de créer rapidement des API hautes performances. Cela nécessite que votre frontend et votre backend soient écrits en TypeScript pour rendre la communication plus productive.

Il existe de nombreuses raisons pour lesquelles tPRC est si efficace pour créer des API fiables, telles que :

• Sécurité de type automatique — Cela aide à maintenir la communication entre le frontend et le backend, en nous informant quand quelque chose a changé sur le serveur et en nous avertissant des erreurs.
• Indépendant du framework — Nous pouvons utiliser tRPC quel que soit le framework que nous utilisons, à condition d’utiliser TypeScript aux deux extrémités (frontend et backend).
• Expérience de développeur — Nous pouvons rapidement créer et utiliser des API entièrement sécurisées sans schémas ni génération de code.

Comment fonctionne le tRPC

Le chemin tRPC fonctionne est simple : il vous offre une sécurité de type de bout en bout, de votre serveur à votre client, sans déclarer de types, ni utiliser de schémas ni utiliser de génération de code. Il a été conçu pour être un moyen plus accessible et plus fiable de créer des API modernes à l’aide du protocole d’appel de procédure distante et de l’inférence TypeScript.

L’une des choses essentielles dans tRPC, ce sont les procédures. Les procédures sont des primitives flexibles et composables pour créer des fonctions backend. Ils utilisent un modèle de générateur, ce qui signifie que vous pouvez utiliser autant de procédures que vous le souhaitez et les réutiliser dans différentes parties de votre serveur.

Une procédure dans tRPC ressemble à ceci :

import { router, publicProcedure } from './trpc';
import { z } from 'zod';
 
const appRouter = router({
  sayMyName: publicProcedure.query(() => {
    return {
      name: 'Leonardo Maldonado',
    };
  }),
});

Il existe deux types de procédures : les requêtes et les mutations. Si vous avez déjà travaillé avec GraphQL auparavant, vous connaissez peut-être la différence entre eux, mais pour récapituler : les requêtes sont utilisées lorsque nous voulons lire des données. Une mutation est utilisée lorsque l’on souhaite créer, modifier ou supprimer des données.

Un autre concept essentiel du tRPC est celui des routeurs, qui nous permettent d’organiser nos routes API de manière modulaire et hiérarchique. Nous en apprendrons davantage sur les procédures et les routeurs en construisant un exemple. Faisons-le.

tRPC en pratique

Nous allons implémenter du code simple qui contient uniquement des points de terminaison et des routeurs. Nous n’utiliserons aucun framework JavaScript pour le montrer en action. L’idée ici est de montrer comment fonctionne le tRPC plutôt que comment il fonctionne avec un framework spécifique.

Pour commencer, nous devons déjà avoir installé TypeScript, puis installer le package @trpc/server :

npm install @trpc/server

Maintenant, nous allons créer un fichier server.ts et y mettre ce code :

import { initTRPC } from '@trpc/server';
 
const t = initTRPC.create();
 
const router = t.router;
const publicProcedure = t.procedure;
 
const appRouter = router({});
 
// Export type router type signature, not the router itself.
export type AppRouter = typeof appRouter;

Nous utilisons le initTRPC fonction builder pour créer un nouvel objet tRPC (nous ne devrions l’avoir que par backend). Après cela, nous construisons un nouveau appRouter configuration, qui nous sera utile à l’avenir, lorsque nous placerons nos routeurs.

Maintenant, nous allons créer notre première procédure. Notre première procédure sera nommée sayMyName, dans lequel nous passerons une chaîne en argument, et il renverra un message avec notre nom. Voici à quoi cela devrait ressembler :

const appRouter = router({
  sayMyName: t.procedure
    .input(z.object({ name: z.string() }))
    .query(({ input }) => {
      const { name } = input;
      return `Hello {name}, nice to see that you're learning tRPC!`;
    })
});

Comme nous pouvons le voir, le nom de notre première procédure est sayMyName, et il reçoit un nom comme argument. Nous utilisons une validation d’entrée pour nous assurer que nous recevons une chaîne comme argument, et un excellent package pour nous aider est
Zod. Cela facilite l’ajout d’une validation à notre code, et cela fonctionne immédiatement avec tRPC, donc un bon conseil est que chaque fois que vous utilisez tRPC, essayez également d’utiliser Zod, car cela rend tout plus facile.

Maintenant que nous avons créé notre première requête, effectuons notre première mutation. Nous développerons une mutation appelée addUser, que nous utiliserons pour ajouter un nouvel utilisateur à un tableau appelé utilisateurs. Créons notre type pour un utilisateur et le tableau :

type User = {
  name: string;
};

const users: Array<User> = [];

Créons maintenant notre addUser mutation. C’est assez similaire à notre requête, mais au lieu de renvoyer une chaîne, nous allons pousser notre nouvel utilisateur vers le tableau des utilisateurs et renvoyer le tableau comme ceci :

const appRouter = router({
  sayMyName: t.procedure
    .input(z.object({ name: z.string() }))
    .query(({ input }) => {
      const { name } = input;
      return `Hello {name}, nice to see that you're learning tRPC!`;
    }),
  addUser: t.procedure
    .input(z.object({ name: z.string() }))
    .mutation(({ input }) => {
      users.push(input);
      return users;
    })
});

Conclusion

Nous avons présenté le tRPC et expliqué comment il peut être puissant pour créer des API modernes, fiables et modulaires. L’utilisation de tRPC augmente le développement en général car le code de l’API et le client sont très proches l’un de l’autre, ce qui permet de détecter d’éventuels bugs lorsque des modifications sont apportées. Il supprime tout le code inutile dont vous avez besoin pour créer un serveur et l’exécuter rapidement. Il est beaucoup plus rapide et plus facile à mettre en œuvre, ce qui explique en partie pourquoi l’adoption du tRPC augmente.

Utilisez-le dans un petit projet et apprenez-en davantage sur ses puissantes fonctionnalités et sur les avantages qu’il peut apporter. Vous ne le regretterez pas !