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).

images/ch09-5.png

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é...

Pour consulter la suite, découvrez le livre suivant :
couv_EIREA.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Création d’une API avec Graphcool
Suivant
Introduction