Connecter React à une API GraphQL

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 :

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

Pour connecter React à...

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