Générer facilement ses endpoints d'API en Typescript

Aujourd'hui nous allons régler un problème rencontré de tous lorsque vous interagissez avec des API, l'écriture des routes !

Pour peu que vous codez avec React ou Angular ou autre et que vous ayez besoin de faire des appels API, ce article risque de vous être utile.

Comment avons nous l'habitude d'écrire nos routes

Généralement, tout paramètre dans la route est concaténé par nos soins, en veillant à éviter les erreurs de frappes lors de la saisie:

const categoryId = 'tech';
const sortBy = 'date';
const order = 'desc';
const endpoint = `http://example.com/api/posts/${categoryId}?sortBy=${sortBy}&order=${order}`;

fetch(endpoint, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'New Post',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
  })
}).then(response => {
  // Traitement de la réponse
}).catch(error => {
  // Gestion des erreurs
});

Ce bloc ressemble à quelque chose que je vois souvent dans les projets surtout les lignes:

const categoryId = 'tech';
const sortBy = 'date';
const order = 'desc';
const endpoint = `http://example.com/api/posts/${categoryId}?sortBy=${sortBy}&order=${order}`;

Ou encore celui-ci:

const groupId = '5678';
const query = 'role=admin';
const endpoint2 = `http://example.com/api/groups/${groupId}/members?${query}`;

Donc, je me pose une question: que se passe t-il lorsque les query parameters sont optionels ?

On fait des conditions avant de générer la variable ?

On est d'accord:

• c'est fastidieux 🥱
• on se répète dès que deux blocs utilisent le même endpoint 😵‍💫
• écrire les URL à la main c'est risquer de mal les écrire 😵
• on n'a pas de contrôle sur ce que tape le développeur donc aucun contrôle sur le fait qu'il saisisse une URL existante 😓

Dans ce cas, on ne respect ni les principes Kiss, ni les principes DRY.

Je me suis dit, j'ai pas envie de répéter ces lignes pour forger mes routes à chaque fois que j'en ai besoin et j'ai réfléchi à une solution simple pour avoir le contrôle, bénéficier de la puissance de Typescript, générer les routes params sans efforts, ainsi que pour les query params.

J'ai créé api-route-builder, une librairie qui enlève cette complexité pour vous. Que vous soyez en frontend ou backend importe peu, laissez-vous guider...

Générer automatiquement nos routes d'API

Commençons par l'installer, pour consulter la page npm, cliquez ici .

npm install api-route-builder
# ou
yarn add api-route-builder

Le principe est simple, on commence par déclarer ses routes dans un fichier qui servira de librairie:

// src/libs/apiRoutes.ts
import { buildRoutes } from "api-route-builder";

// Define your route paths
type RoutePath = "UsersList" | "UserGet" | "GroupJoin";

type Paths = {
  [K in RoutePath]: string;
};

const paths: Paths = {
  UsersList: "/users",
  UserGet: "/users/:userId",
  GroupJoin: "/groups/:groupId/join",
};

export default buildRoutes<RoutePath>("http://localhost:3000", paths);

Comment utiliser la librairie api-route-builder ?

Ensuite à l'utilisation:

apiRoutes.UserGet({ userId: "95dbd66e-c548-4d83-9aca-6087d27e1a87" });

apiRoutes.UsersList(null, { limit: 50, offset: 25 });

Au delà de juste générer les routes facilement, on veut surtout bénéficier de l'autocomplete de Typescript. Toute la force de l'outil se situe dans le fait de ne rien faire à la main, si ce n'est passer les variables.

En espérant que cela vous tiendra à distance des erreurs de saisie. 😋

A bientôt et bon code 😉