Tutoriel GraphQL pour les débutants : qu'est-ce que c'est, fonctionnalités et exemple

Qu'est-ce que GraphQL ?

GraphQL est une technologie côté serveur de couche d'application développée par Facebook pour exécuter des requêtes avec des données existantes. GraphQL peut optimiser les appels d'API RESTful. Il donne un moyen déclaratif de récupérer et de mettre à jour vos données. GraphQL vous aide à charger des données du serveur vers le client. Il permet aux programmeurs de choisir les types de requêtes qu'ils aiment faire.

Pourquoi utiliser GraphQL ?

Following sont les raisons d’utiliser GraphQL :

  • Il fournit une requête lisible par l’homme.
  • Dans GraphQL, il est très simple de gérer de nombreuses bases de données.
  • Il est adapté aux microservices et complex systèmes.
  • Vous pouvez récupérer des données avec un seul appel API.
  • Il vous aide avec le traitement par lots et la mise en cache des requêtes.
  • Vous n’êtes pas confronté à des problèmes de récupération ou de sous-récupération.
  • Adaptation des demandes à vos besoins.
  • Il vous aide à découvrir le schéma dans le format approprié.
  • GraphQL conserve automatiquement la documentation sync avec les changements d'API.
  • L'évolution de l'API est possible sans versioning.
  • Les champs GraphQL sont utilisés dans plusieurs requêtes qui peuvent être partagées avec un niveau de composant supérieur pour être réutilisées.
  • Vous pouvez choisir les fonctions à exposer et comment elles fonctionnent.
  • Il peut être utilisé pour le prototypage rapide d’applications.

Applications de GraphQL

Voici les applications importantes de GraphQL :

  • Il fournit Relay et d'autres frameworks clients
  • GraphQL vous aide à améliorer les performances de l'application mobile.
  • Cela peut réduire les problèmes de récupération excessive en réduisant le service cloud côté serveur et en diminuant l'utilisation du réseau côté client.
  • Il peut être utilisé lorsque l'application client doit spécifier quels champs sont nécessaires dans un format de requête longue.
  • GraphQL peut être pleinement utilisé lorsque vous devez ajouter des fonctionnalités à votre API ancienne ou existante.
  • Il est utilisé lorsqu'il faut simplifier complex API.
  • Mélangez et écrasez le motif de façade, couramment utilisé dans la programmation orientée objet.
  • Lorsque vous devez regrouper des données provenant de plusieurs endroits dans une seule API pratique.
  • Vous pouvez utiliser GraphQL comme abstraction sur une API existante pour spécifier la structure de réponse en fonction des besoins des utilisateurs.

Que devez-vous apprendre avant d’apprendre GraphQl ?

Ce tutoriel GraphQL est basé sur Express et NodeJs. Par conséquent, vous pouvez apprendre GraphQL très facilement avec une compréhension de base de NodeJS.

Composants clés de GraphQL

Maintenant, dans ce didacticiel GraphQL, apprenons les composants clés de GraphQL :

Composants clés de GraphQL
Composants clés de GraphQL

Comme le montre la figure ci-dessus, il existe trois composants clés de GraphQL : 1) Requête, 2) Résolveur et 3) Schéma.

Question

La requête est une requête API effectuée par l'application de la machine client. Il prend en charge les augmentations et pointe vers des tableaux. La requête est utilisée pour lire ou récupérer des valeurs.

Parties de la requête :

Following sont les parties importantes de Query

  1. Champ:

Un champ indique simplement que l'on demande au serveur une information particulière. Suivrewing est un exemple GraphQL d'un champ dans une requête graphQL.

query {
    team {
        id name
    }
}

"data": {
    "team":[ {
        "id": 1, 
        "name": "Avengers"
    }
    ,
    …
]
}
}

Dans l'exemple GraphQL ci-dessus, nous demandons au serveur le champ appelé team et ses sous-champs comme id et name. Le serveur GraphQL renvoie les données que nous avons demandées.

  1. Arguments

In REST, nous ne pouvons transmettre qu'un seul ensemble d'arguments sous forme de segments d'URL et de paramètres de requête. Pour obtenir un profil particulier, un appel REST typique ressemblera à ce qui suitwing:

GET /api'team?id=2 Content-Type: application JSON
 {
    "id": 2, 
    "name": "Justice League."
}

résoudre

Les résolveurs fournissent les instructions pour convertir les opérations GraphQL en données. Ils résolvent la requête en données en définissant des fonctions de résolution.

Il affiche au serveur le processus ainsi que l'emplacement pour récupérer les données en fonction d'un champ spécifique. Le résolveur sépare également le schéma de base de données et le schéma API. Les informations séparées permettent de modifier le contenu obtenu à partir de la base de données.

Programme

Un schéma GraphQL est au centre de la mise en œuvre de GraphQL. Il décrit les fonctionnalités disponibles pour les clients qui s'y connectent.

Fonctionnalités de GraphQL

Voici les fonctionnalités importantes de GraphQL :

  • Il fournit un langage de requête déclaratif, ce qui n'est pas impératif.
  • C'est iciarchical et centré sur le produit.
  • GraphQL est fortement typé. Cela signifie que les requêtes sont exécutées dans le contexte d'un système particulier.
  • Les requêtes dans GraphQL sont codées dans le client, pas dans le serveur.
  • Il possède toutes les fonctionnalités de la couche application du modèle OSI.

Clients GraphQL

Le client GraphQL est un code qui envoie des requêtes POST à ​​un serveur GraphQL approprié. Vous pouvez interroger directement une API GraphQL, mais la bonne approche consiste à exploiter une bibliothèque client dédiée à l'aide de Relay.

Cette bibliothèque JavaScript est développée par Facebook pour créer des applications React avec GraphQL. Les clients GraphQL peuvent être un CMS comme Drupal, une application monopage, une application mobile, etc.

Serveurs GraphQL

Les serveurs GraphQL sont une implémentation côté serveur de la spécification GraphQL. Il représente vos données sous forme d'API GraphQL, que votre programme client peut interroger pour le base de données.

Passerelles GraphQL

Gateway est un modèle de microservice dans lequel vous pouvez créer un service distinct pour faire face à d'autres services backend. Il offre une documentation exploitable et constitue un moyen pratique de collecter des données provenant de plusieurs sources avec une seule demande.

Quelle est la variable dans GraphQL ?

A Variable dans GraphQL est utilisé pour séparer les valeurs dynamiques de la requête client et transmettre la requête en tant que dictionnaire unique. La variable dans GraphQL peut également être utilisée pour réutiliser la requête ou les mutations écrites par le client avec des arguments individuels. Dans graphQL, vous ne pouvez pas transmettre d'arguments dynamiques directement dans la chaîne de requête. La raison en est que le code côté client doit manipuler la chaîne de requête de manière dynamique au moment où vous exécutez le programme.

GraphQL dispose d'un bon moyen de factoriser les valeurs dynamiques de la requête. Il les transmet sous forme de dictionnaire distinct. Ces valeurs sont appelées variables. Chaque fois que nous travaillons avec des variables, nous devons faire ce qui suitwing trois choses:

  1. Remplacez la valeur statique dans la requête par un nom de variable.
  2. Déclarez le nom de la variable comme l'une des variables acceptées par la requête GraphQL.
  3. Transmettez la valeur dans le dictionnaire de variables spécifique au transport.

Voici à quoi cela ressemble dans l'ensemble :

query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}
{
  "episode": "JEDI"
}
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

Comme vous pouvez le voir dans l'exemple GraphQL ci-dessus, nous avons simplement passé une variable différente autre que la nécessité de construire une nouvelle requête.

Qu’est-ce que la mutation ?

Une mutation est un moyen de modifier l'ensemble de données dans GraphQL. Il modifie les données dans le magasin de données et renvoie une valeur. Les mutations vous aident à insérer, mettre à jour ou supprimer des données. Généralement, les mutations sont définies comme une partie du schéma.

Points à considérer lors de la conception de mutations GraphQL

Voici les points importants lors de la conception de GraphQL :

  • Appellation: Tout d’abord, vous devez nommer votre verbe de mutation. Puis le nom, ou « objet » le cas échéant. Utilisez camelCase pour nommer les mutations.
  • Spécificité: Vous devez autant que possible être spécifique à la mutation. Les mutations doivent représenter les actions sémantiques entreprises par l'utilisateur.
  • Objet d'entrée : Utilisez un type d’objet d’entrée unique, unique et obligatoire comme argument pour exécuter la mutation sur le client.
  • Type de charge utile unique : Vous devez utiliser un type de charge utile unique pour chaque mutation. Vous pouvez également ajouter la sortie de mutation sous forme de champ à ce type de charge utile particulier.
  • Imbrication : Utilisez l'imbrication pour votre mutation partout où cela a du sens. Il vous permet d'utiliser pleinement l'API GraphQL.

Différence entre GraphQL et REST

Following le tableau montre une différence importante entre GraphQL et REST.

GraphQL REST
Il suit une approche axée sur le client architecture. Il suit le serveur architecture.
GraphQL peut être organisé en termes de schéma. REST peut être organisé en termes de points de terminaison.
GraphQL est un growing communauté. REST est une très grande communauté.
La vitesse de développement dans GraphQL est rapide. La vitesse de développement dans REST est lente.
La courbe d'apprentissage dans GraphQL est difficile. La courbe d'apprentissage dans REST est modérée.
L'identité est séparée de la façon dont vous la récupérez. Le point de terminaison que vous appelez dans REST est l'identité d'un objet particulier.
Dans GraphQL, le serveur détermine les ressources disponibles. La forme et la taille de la ressource sont déterminées par le serveur dans REST.
GraphQL offre une cohérence élevée sur toutes les plateformes. Il est difficile d’obtenir une cohérence sur toutes les plateformes.

Inconvénients de GraphQL

Voici les inconvénients de GraphQL :

  • pour jeunes ecosystème
  • Manque de ressources sur la partie backend.
  • Modèle de conception manquant pour un complex app.
  • Problèmes de performances avec complex requêtes.
  • Exagération pour les petites applications
  • GraphQL ne dépend pas des méthodes de mise en cache HTTP qui permettent de stocker le contenu des requêtes.
  • GraphQL ne comprend pas les fichiers. Par conséquent, une fonctionnalité de téléchargement de fichiers n’est pas incluse.
  • Avec GraphQL, soyez prêt à suivre de nombreuses formations préalables au développement, comme l'apprentissage du langage de définition de schéma.

Applications et outils Open Source utilisés par GraphQL

Les applications et outils open source importants utilisés par GraphQL sont les suivants :

  • Gatsby: Gastby est une application optimisée par GraphQL qui peut utiliser des données dérivées de plusieurs sources API GraphQL. Vous pouvez l'utiliser pour développer une application React statique et basée sur le client.
  • GraphiQL: C'est un identifiant qui s'intègre au navigateur et interagit également avec l'API de GraphQL. Certaines des fonctions incluses par GraphiQL sont les mutations, les requêtes de données et les requêtes de saisie semi-automatique.
  • Terrain de jeu GraphQL: Il s'agit d'un IDE puissant doté d'un éditeur intégré pour gérer les mutations, la validation, les requêtes GraphQl, les abonnements, etc. Le développeur peut utiliser cet IDE pour visualiser la structure du schéma.
  • Prisma: Prisma est une couche d'abstraction de base de données qui transforme vos bases de données en API GraphQL avec des opérations CRUD (Créer, Lire, Mettre à jour et Supprimer).
  • Bit: Il s'agit d'un outil et d'une plate-forme open source qui convertit le code réutilisable en composants. Les développeurs peuvent les utiliser pour partager et développer divers projets.

Résumé

  • GraphQL est une technologie côté serveur de couche d'application développée par Facebook pour exécuter des requêtes avec des données existantes.
  • Vous pouvez utiliser GraphQL pour récupérer des données avec un seul appel API.
  • GraphQL vous aide à améliorer les performances de l'application mobile.
  • Les composants de requête GraphQL importants sont : 1) Requête, 2) Résolveur, 3) Schéma.
  • GraphQL est fortement typé. Cela signifie que les requêtes sont exécutées dans le contexte d'un système particulier.
  • Le client GraphQL est un code qui envoie des requêtes POST à ​​un serveur GraphQL approprié.
  • Les serveurs GraphQL sont une implémentation côté serveur de la spécification GraphQL.
  • Gateway est un modèle de microservice dans lequel vous pouvez créer un service distinct pour faire face à d'autres services backend.
  • GraphQL dispose d'un bon moyen de factoriser les valeurs dynamiques de la requête.
  • Une mutation est un moyen de modifier l'ensemble de données dans GraphQL.
  • Les points importants lors de la conception de GraphQL sont : 1) Dénomination, 2) Spécificité, 3) Objet d'entrée Type de charge utile unique et 4) Imbrication.
  • GraphQL peut être organisé en termes de schéma, tandis que REST peut être organisé en termes de points de terminaison.
  • L’inconvénient de GraphQL est qu’il manque de ressources sur la partie backend.