Consommer des API REST et GraphQL

a. Définition

Un autre type d’API Web qui ne possède pas ces défauts est maintenant couramment utilisé, les API REST (Representational State Transfer).

L’idée de ce style d’architecture est de pouvoir accéder de manière normalisée...

a. Présentation

Nous allons maintenant rentrer dans le vif du sujet et voir comment consommer une API REST et une API GraphQL. Pour cela, nous allons au préalable utiliser Strapi pour créer rapidement une API : https://strapi.io/. Strapi est une solution pour créer rapidement une API REST et GraphQL. Il a été développé par une jeune start-up française fondée en 2018. Strapi peut également servir en tant que CMS Headless.

Il permet de créer le code backend d’une API en quelques lignes de commande et une interface graphique front-office permet aux utilisateurs d’ajouter du contenu. Strapi peut utiliser plusieurs bases de données comme SQLite, MySQL, PostgreSQL, MariaDB et MongoDB. L’API peut ensuite être déployée sur un serveur Node.js ou un hébergeur PaaS comme Netlify ou Heroku.

Pour une API REST, Strapi permet d’utiliser des paramètres de tri, filtres, et de pagination dans vos URI.

Il est également possible d’utiliser plusieurs plugins pour ajouter des fonctionnalités supplémentaires.

Liste des plugins officiels maintenus par la core team de Strapi :

a. Définition et usage

Fetch est une API native, disponible dans tous les navigateurs modernes, pour envoyer des requêtes HTTP asynchrones. Cette API remplace désormais l’ancienne méthode utilisée pour faire des requêtes AJAX (Asynchronous JavaScript And XML) via l’objet XMLHttpRequest. Elle est plus flexible et propose de puissantes fonctionnalités :

La méthode fetch() prend en premier paramètre l’URI du point de terminaison d’une API et, optionnellement, en second paramètre un objet d’options.

let promesse = fetch("URI", {/* options */}); 

Lorsque fetch() reçoit la réponse du serveur, elle renvoie une promesse tenue, peu importe le statut HTTP (200+, 300+, 400+ ou 500) avec en valeur de résolution un objet Response.

On appelle ensuite la fonction .json() de l’objet Response, qui renvoie une promesse résolue avec, en valeur de résolution, les données du corps de la réponse au format JSON.

let promesse = fetch("URI", {/* options */}); 
 
promesse.then(reponse => { 
  console.log(reponse.json()); 
)); 

b. Les objets Request et Response

Plutôt que de passer l’URI en premier paramètre, vous pouvez également fournir à la place un objet Request. Le constructeur de l’objet Request prend exactement les mêmes paramètres que fetch() :

const request = new Request("monURI", {/* options */ }); 
 
let promesse = fetch(request)); 

Les propriétés de l’objet Request :

a. Installation avec Vue CLI

Apollo est un ensemble d’outils permettant de créer une API GraphQL côté serveur et de consommer n’importe quelle API GraphQL côté client.

Pour en savoir plus : https://www.apollographql.com/

La communauté Vue.js a développé le plugin Vue Apollo pour pouvoir intégrer le client Apollo facilement dans un projet Vue.js. La documentation officielle est disponible à l’adresse suivante : https://vue-apollo.netlify.app/

Il existe différents types d’installation. Le plus simple est d’utiliser Vue CLI lorsque vous utilisez une API GraphQL créée avec Apollo (ce n’est pas notre cas avec Strapi).

Vous pouvez ainsi :

Si vous utilisez Vue CLI, le plugin peut s’installer très facilement sans aucune configuration avec la commande suivante :

vue add apollo 

Il est également possible de l’installer via l’interface graphique :

vue ui 

b. Installation manuelle pour consommer une API Strapi

Nous utilisons l’API GraphQL de Strapi. Nous allons donc installer uniquement les éléments nécessaires suivants pour la consommer :