GraphQL expliqué simplement

GraphQL est un langage de requĂȘtes pour les APIs, conçu par Facebook (les mĂȘmes qui ont inventĂ© React), qui se prĂ©sente comme une alternative aux API REST.

Pourquoi une alternative Ă  REST ?

Pour comprendre pourquoi GraphQL a Ă©tĂ© imaginĂ©, il faut d’abord revenir sur ce qui ne fonctionne pas dans les API REST.

Une ressource = une URL

Dans une API REST, chaque ressource nĂ©cessite une URL dĂ©diĂ©e. Par exemple, si votre application a besoin d’un utilisateur et de ses enfants, il faudra faire deux requĂȘtes distinctes.

Une requĂȘte pour rĂ©cupĂ©rer l’utilisateur :

GET /user?id=123

// RĂ©ponse
{
   id: 123,
   name: 'Homer',
   children: [456,789]
}

Une requĂȘte pour rĂ©cupĂ©rer ses enfants, Ă  partir des donnĂ©es renvoyĂ©es par la requĂȘte prĂ©cĂ©dente.

GET /users?ids=[456,789]

// RĂ©ponse
[
   {
      id: 456,
      name: 'Lisa'
   },
   {
      id: 789,
      name: 'Bart'
   }
]

A cause de son dĂ©coupage par ressource, REST nous force Ă  dĂ©multiplier les appels, et Ă  donc Ă  ralentir le chargement de notre application. 

Pas de notion de champ

Pour pallier à ce problÚme, certains choisissent de détourner les principes du REST, et de retourner toutes les ressources liées en un unique appel.

GET /user?id=123

// RĂ©ponse :
{
   id: 123,
   children: [
      {id: 456, name: 'Lisa'}, 
      {id: 789: name: 'Bart'}
   ]
}

Cette façon de faire permet certes de ne pas multiplier les appels, mais elle nous force Ă  toujours recevoir l’intĂ©gralitĂ© des donnĂ©es, mĂȘme si notre application n’en a finalement pas besoin.

Tout ceci vient du fait qu’une API REST n’a pas de notion de champs, elle ne connaĂźt que des ressources.

Les principes de GraphQL

Une API GraphQL permet de requĂȘter uniquement les champs souhaitĂ©s sur les ressources souhaitĂ©es, le tout en un seul appel. 

// RequĂȘte :
POST /
{
    getUser(id: 123) {
        name,
        children: {
            name
        }
     }
}

// RĂ©ponse :
{
   name: 'Homer',
   children: [
      {name: 'Lisa'}, 
      {name: 'Bart'}
   ]
}

Dans la requĂȘte ci-dessus, nous demandons l’utilisateur 123, avec son nom et celui de ses enfants. Nous devons indiquer dans la requĂȘte les informations dont nous avons besoin.

Autre avantage considĂ©rable, une API GraphQL met Ă  disposition un schĂ©ma, que les applications clientes peuvent rĂ©cupĂ©rer pour connaĂźtre les diffĂ©rentes requĂȘtes possibles, ainsi que les diffĂ©rents champs prĂ©sents dans chaque ressource.

Comparatif REST vs GraphQL

En REST : Une route par ressource.
En GraphQL : Une seule route pour toutes les ressources.

On requĂȘte une ressource complĂšte.
On est obligé de précisé les champs souhaités.

Les paramĂštres sont passĂ©s dans l’URL.
Les paramĂštres sont passĂ©s dans le corps de la requĂȘte.

La réponse est un objet.
La rĂ©ponse est un object normalisĂ©, qui correspond au format de la requĂȘte.

Les requĂȘtes utilisent les verbes HTTP, comme GET, DELETE, POST, UPDATE.
Les requĂȘtes utilisent uniquement POST (ou uniquement GET).

Illustration

RequĂȘte en REST : donne moi l’utilisateur qui a pour nom Simpson et pour prĂ©nom Homer.

/user/?lastname=homer&firstname=simpson

RĂ©ponse : l’API REST vous renvoie l’utilisateur Homer Simpson avec toutes ses informations, et toutes ses relations. 

RequĂȘte en GraphQL : donne moi l’utilisateur qui a pour nom Simpson et prĂ©nom Homer, donne moi son corps, donne moi sa femme, ainsi que le corps de sa femme.

{
    user(firstname="Homer", lastname="Simpson") {
        body,
        wife {
            body
        }
    }
}

RĂ©ponse : En GraphQL, l’API ne renvoie que ce que vous demandez. Dans notre cas, Homer Simpson, son corps, sa femme Marge, et son corps.

Si vous avez besoin de plus d’informations, il vous faut le demander. Notre application n’Ă©tant pas naturiste, demandons les habits de nos personnages :

{
    user(firstname="Homer", lastname="Simpson") {
        body,
        clothes,
        wife {
            body
            clothes,
        }
    }
}

J’espĂšre que cet article vous aura permi d’avoir une idĂ©e gĂ©nĂ©rale de ce qu’est GraphQL et de ses intĂ©rĂȘts et avantages. Si vous voulez aller plus loin, je vous recommande ce trĂšs complet article de Marmelab.



Hello.
Mon nom est Vincent Ballut, je suis développeur web freelance basé à Paris. J'ai aussi un site pro, un github, et je tweet de temps en temps. Si vous souhaitez me contacter, je réponds plus facilement sur linkedin ou par email.

Ajouter un commentaire

Laisser un commentaire

Hello.
Je m'appelle Vincent Ballut,
développeur web
freelance.

Je publie des articles accessibles et pédagogiques sur tout ce qui touche au développement web et à ses problématiques.

Dans la vraie vie, je suis développeur web freelance basé à Paris, spécialisé dans le développement frontend (Angular, React, VueJS, etc).

J'ai aussi un site pro, un github, et je tweet de temps en temps. Si vous souhaitez me contacter, je réponds plus facilement sur linkedin ou par email.

Derniers articles