Appel d’une API avec React et Apollo Client Apollo Client

À présent que notre API est prête, voyons comment l’appeler, et notamment depuis une application React. Une API GraphQL repose sur une API REST classique, donc il serait bien évidemment possible de l’appeler grâce aux fonctions classiques de requêtes HTTP, par exemple la fonction fetch. Ce serait cependant passer à côté de fonctionnalités très pratiques offertes par GraphQL.

Il existe plusieurs bibliothèques tierces permettant d’appeler une API GraphQL ; la plus connue et la plus réputée dans l’écosystème est probablement Apollo (https://apollographql.com), c’est donc celle-ci que nous allons découvrir ensemble. Apollo permet de réaliser l’intégralité d’une application client-serveur échangeant grâce à GraphQL, mais nous n’allons utiliser que la partie cliente, sobrement appelée Apollo Client (que j’appellerai simplement Apollo dans la suite du chapitre).

Voilà à quoi notre application finale ressemblera

Créons dès maintenant notre projet React, de la même manière que les autres projets, en y ajoutant les dépendances d’Apollo :

yarn init -y 
yarn add -D parcel-bundler 
yarn add react react-dom apollo-boost @apollo/react-hooks graphql