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
1. Lire des données en envoyant des queries Queries
Pour le moment laissons de côté ...