Les trois piliers des intégrations : REST, GraphQL et gRPC dans le monde JavaScript
\n\nLe développement en JavaScript aujourd'hui, c'est un échange infini de données. Votre application récupère les taux de change, envoie des formulaires, streame des vidéos ou synchronise des documents en temps réel. Et à chaque fois, vous choisissez comment votre client va communiquer avec le serveur.
\n\nPendant longtemps, la norme était REST. C'est simple comme un marteau. Mais pour les projets complexes, un marteau ne suffit pas — il faut un couteau suisse (GraphQL) ou même un marteau-piqueur (gRPC).
\n\nDans cet article, nous allons décortiquer les trois principales approches pour travailler avec des API en JavaScript. Vous verrez des exemples de code concrets, comprendrez les forces et les faiblesses de chaque protocole et pourrez choisir en connaissance de cause l'outil pour votre prochain projet. C'est parti !
\n\nAPI REST : un classique qui ne meurt pas
\n\nREST (Representational State Transfer) est un style d'architecture, pas un protocole. La plupart des développeurs comprennent par REST les requêtes HTTP vers des ressources (GET /users, POST /orders).
\n\nÀ quoi ressemble une requête REST en JavaScript
\n\nLa méthode la plus populaire est le fetch natif ou la bibliothèque axios. Voici une requête GET typique :
// Récupérer la liste des utilisateurs\nconst getUsers = async () => {\n const response = await fetch('https://api.example.com/users');\n if (!response.ok) {\n throw new Error(`Erreur HTTP ! statut : ${response.status}`);\n }\n const data = await response.json();\n return data;\n};\n\n// Exemple d'utilisation\ntry {\n const users = await getUsers();\n console.log(users);\n} catch (error) {\n console.error('Erreur lors du chargement des utilisateurs :', error);\n}\n\n\nAvantages de REST pour un développeur JavaScript
\n\n- \n
- Simplicité et prévisibilité. GET, POST, PUT, DELETE — chaque verbe a un sens clair. \n
- Mise en cache. Le cache HTTP fonctionne nativement, ce qui accélère les requêtes répétées. \n
- Large support. N'importe quel backend, dans n'importe quel langage, sait servir du REST. \n
- Outils. Postman, Swagger, Insomnia — un vaste écosystème pour les tests. \n
Principaux inconvénients de REST
\n\n- \n
- Sur-récupération (over-fetching). Vous demandez /users, et le serveur renvoie tous les champs, y compris le mot de passe (le hash, bien sûr) et les ID internes, alors que vous n'avez besoin que du nom et de l'email. \n
- Sous-récupération (under-fetching). Pour obtenir un utilisateur et ses dernières commandes, vous devez faire deux requêtes : /users/1 et /users/1/orders. \n
- Multiplicité des endpoints. Une logique métier complexe génère des dizaines d'URL difficiles à maintenir. \n
\n\n\nQuand choisir REST ? Idéal pour les applications CRUD simples, les API publiques et les projets où la simplicité et la mise en cache sont importantes.
\n
GraphQL : ne demandez que ce dont vous avez besoin
\n\nGraphQL est un langage de requête et un environnement d'exécution créé par Facebook (aujourd'hui Meta). Au lieu de multiples endpoints, un seul endpoint, et le client décide lui-même quels champs obtenir.
\n\nÉcrire une requête GraphQL en JavaScript
\n\nPour travailler avec GraphQL côté client, on utilise le plus souvent la bibliothèque @apollo/client ou urql. Mais on peut aussi le faire simplement avec fetch :
// Requête GraphQL via fetch\nconst query = `\n query {\n user(id: "123") {\n name\n email\n posts {\n title\n createdAt\n }\n }\n }\n`;\n\nconst fetchUserWithPosts = async () => {\n const response = await fetch('https://api.example.com/graphql', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ query })\n });\n const result = await response.json();\n return result.data;\n};\n\n// Appel\nfetchUserWithPosts().then(data => console.log(data));\n\n\nVous voyez la différence