Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. React
  3. Connecter React à une API GraphQL
Extrait - React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition)
Extraits du livre
React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition) Revenir à la page d'achat du livre

Connecter React à une API GraphQL

Présentation de GraphQL et premières requêtes

1. Qu’est-ce que GraphQL ?

Historiquement, le modèle REST dominait le paysage, où chaque entité de données est associée à une URL spécifique. À chaque fois qu’une requête est faite, l’API renvoie la totalité des données liées à cette entité. Bien que ce mécanisme paraisse direct et intuitif, il présente deux inconvénients majeurs :

  • Si plusieurs entités sont nécessaires simultanément, il faut effectuer plusieurs requêtes, ce qui pourrait ne pas fournir toutes les données souhaitées.

  • Dans les situations où seulement une fraction d’une entité est nécessaire, il y a surextraction, entraînant un gaspillage de ressources et de bande passante.

C’est ici qu’intervient GraphQL. Conçu pour régler ces problèmes, GraphQL n’est pas un « langage » au sens strict, mais une spécification pour construire et consommer des API.

Dans GraphQL, le développeur back-end établit un schéma qui décrit la structure et les types de données disponibles. Ceci donne au développeur front-end le pouvoir de requêter exactement ce qu’il souhaite, ni plus, ni moins.

Au lieu de multiples URL comme avec REST, une API GraphQL offre un unique point d’entrée. Les données sont requêtées en utilisant une syntaxe qui reflète la structure du retour attendu en format JSON.

Outre les requêtes pour lire des données, GraphQL permet également de modifier des données via ce qu’on appelle des mutations.

2. Premières requêtes GraphQL avec React

 Avant toute chose, initialisez un nouveau projet React avec Vite.

Pour connecter React à...

Création d’une API avec Hasura

Hasura est une plateforme qui vous permet de créer rapidement des API GraphQL à partir de vos bases de données existantes. Dans cette section, nous allons explorer comment créer une API GraphQL avec Hasura et comment la connecter à une application React. Cette partie intéressera particulièrement les lecteurs qui souhaitent partir d’un schéma de base de données SQL. Si vous avez déjà une base de données qui tourne, vous pouvez la connecter simplement à Hasura.

Introduction à Hasura

Hasura simplifie le processus de création d’une API GraphQL en générant automatiquement les schémas et les requêtes à partir de vos bases de données.

 Configurez la connexion à votre base de données en fournissant les informations de connexion. Hasura analysera la structure de votre base de données et générera automatiquement un schéma GraphQL.

 Rendez-vous d’abord sur https://cloud.hasura.io/. Utilisez la méthode de connexion de votre choix ou bien créez un compte.

images/11EI01.png

Vous pouvez ensuite créer un projet. L’utilisation de Hasura pour de petits projets personnels est totalement gratuite. Vous êtes ensuite invités à choisir la région dans laquelle votre projet sera créé....

Appel d’une API avec React et Apollo Client

Maintenant que vous avez créé une API GraphQL avec Hasura, vous pouvez utiliser Apollo Client pour appeler et récupérer les données dans votre application React. En apportant quelques modifications à notre code, nous allons pouvoir afficher des données venant de l’API.

1. Configuration d’Apollo Client

D’abord, afin de simplifier l’exemple, nous n’entrerons pas dans les problématiques d’authentification à l’API, mais, afin de la requêter, nous devons ajouter au moins un header au client Apollo et modifier l’URI. Nous allons utiliser le header x-hasura-admin-secret, uniquement à des fins de test :

const client = new ApolloClient({ 
  uri: 'Votre GraphQL Endpoint', 
  cache: new InMemoryCache(), 
  headers: { 
    'x-hasura-admin-secret': `dLc7qqBaW[...]x7bLXlVyB9f` 
  } 
}); 

2. Appel de l’API créée avec Hasura

On peut désormais créer un composant qui va faire une requête vers notre nouvelle API GraphQL hébergée sur Hasura :

// Display.jsx 
import { useQuery, gql } from '@apollo/client'; 
 
export default function Display() { 
  const { loading, error, data }...

Conclusion

GraphQL est une solution qui peut satisfaire de nombreux besoins. Il est important de se familiariser avec cet outil et de l’essayer afin de savoir s’il peut s’intégrer à votre manière de travailler.

Nous avons tenté ici de voir des solutions comme Hasura, mais il existe encore beaucoup d’autres options quand on travaille avec GraphQL. Ces sujets dépassent le champ d’application de React, mais sont très intéressants, c’est la raison pour laquelle ce chapitre a vu le jour.