Pourquoi GraphQL est le futur? Une introduction claire à GraphQL

GraphQL est un langage de requête open-source développé par Facebook en 2015 et il est construit sur la structure de données graphiques. De nombreuses grandes entreprises adoptent GraphQL en plus de Facebook, notamment GitHub, Pinterest, Twitter, Sky, The New York Times, Shopify, Yelp et bien d'autres.

Dans cet article, nous allons apprendre ce qu'est GraphQL et comment il pourrait remplacer entièrement les API REST. Nous verrons également comment fonctionne GraphQL et ses principales fonctionnalités.

Revenons aux bases avant de plonger dans le monde de GraphQL.

API REST

REST (Representational state transfer) est l'architecture Web largement utilisée car elle est flexible et simple à utiliser. C'est une convention utilisée pour manipuler la collecte de données hébergées sur le serveur. Avec des règles communes autour des méthodes de requête HTTP et une structure d'URL uniforme, il est utilisé pour créer, mettre à jour, lire et supprimer les données sur un serveur.

Méthodes HTTP

Le protocole HTTP (HyperText Transfer Protocol) est un protocole sans état, ce qui signifie que le client et le serveur savent comment gérer les données pour chaque instance individuelle d'une demande. Une fois que le navigateur lance la requête, le serveur renvoie une réponse au client. A chaque requête initialisée, une nouvelle connexion est établie entre le client et le serveur. Les methodes HTTP sont GET, POST, PUT, PATCH, DELETE.

• GET: Il est utilisé pour récupérer toutes les informations du serveur en utilisant l'URI et ne doit modifier aucune des données

• POST: Il est utilisé pour envoyer des données au serveur et pour créer de nouvelles ressources

• PATCH: il est utilisé pour mettre à jour et modifier partiellement la ressource

• PUT: Il est utilisé pour remplacer entièrement la ressource, contrairement à la méthode PATCH

• SUPPRIMER: cela supprime une ressource

En visuel..

Comme le montre le graphique, nous avons un utilisateur Twitter. Cet utilisateur a un nom d'utilisateur, une image, un lieu, des tweets, des abonnés et des abonnements. Nous aurons une API et des routes pour récupérer les ressources pour divers scénarios.

Considérons ci-dessous les routes qui seront accessibles par l'utilisateur:

• Follower d'un utilisateur: /user/1/followers

• Tweets d'un suiveur de l'utilisateur: /utilisateur/1/followers/suiveurNo1/tweet/content

• Tweets des personnes que l'utilisateur suit: /utilisateur/1/followers/suiveurNo1/tweet/content

• Utilisateur qu'il suit: /utilisateur/following

Nous pourrions avoir un routage interne encore plus compliqué avec divers points de terminaison pour accéder aux ressources, ce qui peut augmenter la complexité de la compréhension d'une API pour le développeur.

Tout en déterminant combien d'API l'application consomme, vous allez:

• vous retrouver avec beaucoup de points de terminaison (endpoints)

• Créer une application lourde

• Pourrait ne pas avoir de séparation des préoccupations

• Les points de terminaison d'API créeront une structure REST complexe

• Une fiabilité lâche sur les résultats qu'elle fournit

Voyons maintenant l’avantage de l’architecture GraphQL par rapport aux API REST et comment GraphQL peut nous aider à lutter contre le routage reposant ci-dessus.

Qu'est-ce que GraphQL?

Un graphe est une structure de données qui contient des nœuds et une relation entre deux nœuds appelée arêtes.

Examinons quelques-unes des principales fonctionnalités de GraphQL:

• GraphQL est fortement typé, ce qui garantit que la requête est valide dans le système de type GraphQL avant son exécution, c'est-à-dire qu'au moment du développement, le serveur peut apporter certaines garanties sur la structure de la réponse, ce qui rend GraphQL puissant.

• GraphQL fournit un moyen efficace (pas de surextraction et de sous-extraction des données) et plus compréhensible de consommer APIS

• Il peut être utilisé avec n'importe quel framework backend ou langage de programmation

• Il permet d'ajouter de nouveaux champs et types à l'API GraphQL sans impact sur vos requêtes existantes et sans créer plusieurs versions de la même API

• GraphQL expose un seul point de terminaison

• GraphQL est auto-documenté

L'image ci-dessus est un graphique qui montre toutes les relations de notre application et comment les données sont structurées dans le graphique. Cela nous aidera à comprendre comment GraphQL fonctionne avec la structure de données du graphique.

Nous pouvons utiliser toutes les bases de données comme MongoDB, MySQL, PostgreSQL sans changer aucune structure de données

Comment accéder au graphique via GraphQL?

GraphQL traversera jusqu'à un enregistrement particulier qui est appelé comme nœud racine et lui demandera d'obtenir tous les détails de cet enregistrement.

Exemple:

Nous pouvons prendre n'importe quel utilisateur, par exemple un utilisateur avec l'ID1 et obtenir les données de son abonné associé (par exemple, un utilisateur avec l'ID2). Écrivons un morceau de requête GraphQL pour montrer comment y accéder.

query{
 user(id:"1"){
   users{
   tweet{
   content
   }
  }
 }
}

Ici, nous demandons à GraphQL de marcher jusqu'au graphe à partir du nœud racine qui est l'objet utilisateur avec un argument comme id:1 et d'accéder au contenu du tweet du follower.

Requêtes GraphQL

Dans cette section, vous apprendrez de quoi une requête GraphQL est composée.

Les concepts que je vais présenter sont les suivants:

• Des champs
• Arguments
• Alias
• Fragments
• Variables
• Directives
• Des champs

Examinons une simple requête GraphQL:

{
  user {
    name
  }
}

{
  "data": {
    "user": {
      "name": "foo"
    }
  }
}

• Dans cette requête, vous voyez 2 champs. L'utilisateur du champ renvoie un objet contenant un autre champ, un type String.

• Nous avons demandé au serveur GraphQL de renvoyer l'objet utilisateur avec son nom mais nous pourrions également avoir un champ followers dans l'utilisateur qui répertorie les followers de cet utilisateur.

Arguments

Vous pouvez passer l'argument pour spécifier l'utilisateur auquel nous voulons faire référence.

Exemple:

{
  user(id: "1") {
    name
  }
}

Nous passons un identifiant, mais nous pourrions aussi passer un argument de nom, en supposant que l'API a la fonctionnalité à renvoyer avec ce type de réponse. Nous pourrions également avoir un argument de limite, pour spécifier le nombre d'abonnés que nous voulons que l'API renvoie.

{
  user(id: "1") {
    name
    followers(limit: 50)
  }
}

Alias

Vous pouvez demander à l'API GraphQL de renvoyer un champ avec un nom différent.

Exemple:

{
  accholder: user(id: "1") {
    firstname: name
  }
}

{
  "data": {
    "accholder": {
      "firstname": "lawal"
    }
  }
}

{
  first_user: tweet(id: "1") {
     tweet_content: content
  }
  second_user: tweet(id: "2") {
    tweet_content: content
  }
}

Les deux champs de tweet auraient été en conflit, mais comme nous pouvons les aliaser avec des noms différents, nous pouvons obtenir les deux résultats en une seule requête du même point de terminaison endpoint.

Fragments.

• Dans la requête ci-dessus, nous avons répliqué la structure du tweet. Les fragments nous permettront de spécifier la structure avec de nombreux champs.

• Le concept de fragments est fréquemment utilisé pour diviser les exigences de données d'application complexes en segments plus petits, en particulier lorsque vous devez combiner de nombreux composants d'interface utilisateur avec différents fragments en une seule extraction de données initiale.

Exemple:

{
  leftComparison: tweet(id: 1) {
    ...comparisonFields
  }
  rightComparison: tweet(id: 2) {
    ...comparisonFields
  }
}

fragment comparisonFields on tweet {
  userName
  userHandle
  date
  body
  repliesCount
  likes
}

L'API ci-dessus renverra la réponse suivante:

{
  "data": {
    "leftComparison": {
      userName: "foo",
      userHandle: "@foo",
      date: "2021-02-20",
      body: "Life is good",
      repliesCount: 10,
      tweetsCount: 200,
      likes: 500,
    },
    "rightComparison": {
      userName: "boo",
      userHandle: "@boo",
      date: "2020-02-18",
      body: "This blog is awesome",
      repliesCount: 15,
      tweetsCount: 500,
      likes: 700 
  }
}

Variables

Les variables GraphQL permettent de spécifier dynamiquement une valeur utilisée dans une requête. Ce sera bien car cela remplacera la valeur statique dans la requête. Comme vous l'avez vu ci-dessus, nous avons passé nos arguments dans la chaîne de requête. Nous passerons les arguments avec une variable $.

Exemple:

Nous avons ajouté l'ID utilisateur comme chaîne à l'intérieur de la requête

{
  accholder: user(id: "1") {
    fullname: name
  }
}

Nous ajouterons la variable et remplacerons la valeur statique. La même chose peut être écrite comme ceci:

query GetAccHolder($id: String) {
  accholder: user(id: $id) {
    fullname: name
  }
}

{
  "id": "1"
}

Ici, GetAccHolder est la fonction nommée. Il est utile de donner une fonction nommée lorsque vous recevez de nombreuses requêtes dans votre application.

Variable par défaut:

Nous pouvons spécifier la valeur par défaut d'une variable

Exemple

query GetAccHolder($id: String = "1") {
  accholder: user(id: $id) {
    fullname: name
  }
}

Variable requise

Nous pouvons créer la variable selon les besoins en ajoutant ! au type de données

query GetAccHolder($id: String!) {
  accholder: user(id: $id) {
    fullname: name
  }

Directives

Nous avons déjà vu comment nous pouvons passer la variable dynamique dans nos requêtes. Maintenant, nous pouvons voir comment générer dynamiquement la structure de requête à l'aide de directives.

Les directives aident à modifier dynamiquement la structure et la forme de nos requêtes à l'aide de variables.

@include et @skip sont les deux directives disponibles dans GraphQL

Exemple de directives:

@include(if: Boolean) - Inclut les champs s'il est vrai

query GetFollowers($id: String) {
  user(id: $id) {
    fullname: name,
    followers: @include(if: $getFollowers) {
      name
      userHandle
      tweets
    }
  }
}

{
  "id": "1",
  "$getFollowers": false
}

Ici, $getFollowers est faux, donc les abonnés au nom de champ ne seraient pas inclus dans la réponse @skip(si: Boolean) -> Ignore les champs si c'est vrai.

query GetFollowers($id: String) {
  user(id: $id) {
    fullname: name,
    followers: @skip(if: $getFollowers) {
      name
      userHandle
      tweets
    }
  }
}

{
  "id": "1",
  "$getFollowers": true
}

Ici, $getFollowers est vrai, donc les abonnés au nom de champ seraient ignorés (exclus) de la réponse.

Ressources.

• GraphQL - Le site officiel

Conclusion.

Dans cet article, nous avons appris ce qu'est GraphQL et comment composer diverses requêtes avec.

Si vous avez aimé, laissez un coeur pour montrer votre soutien. Aussi, laissez vos réponses ci-dessous et contactez-moi si vous rencontrez des problèmes.