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

Qu'est-ce que GraphQL ?

GraphQL GraphQL est une technologie serveur de couche application développée par Facebook (désormais Meta) pour exécuter des requêtes sur des données existantes. Elle a été rendue publique en 2015 et est régie par GraphQL. Foundation Depuis 2018, GraphQL optimise les appels d'API RESTful. Il offre une méthode déclarative pour récupérer et mettre à jour vos données. GraphQL facilite le chargement des données du serveur vers le client et permet aux développeurs de choisir les types de requêtes qu'ils souhaitent effectuer.

Que faut-il 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.

Pourquoi utiliser GraphQL ?

Voici les raisons d’utiliser GraphQL :

• Il fournit une requête lisible par l’homme.
• Avec GraphQL, il est très facile de gérer de nombreuses bases de données.
• Il convient aux microservices et aux systèmes complexes.
• 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 ne rencontrez pas de problèmes de sur- et sous-extraction de données.
• Adaptation des demandes à vos besoins.
• Il vous aide à découvrir le schéma dans le format approprié.
• GraphQL maintient automatiquement la documentation synchronisée avec les modifications de l'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.ping.

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é lorsque vous devez simplifier une API complexe.
• 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 un abstracmodification d'une API existante pour spécifier la structure de réponse en fonction des besoins de l'utilisateur.

Ces avantages reposent tous sur le fonctionnement coordonné de trois éléments.

Composants clés de GraphQL

Maintenant, dans ce didacticiel GraphQL, apprenons les 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 :

Voici les parties importantes de Query

1. Champ:

Un champ indique simplement que nous demandons des informations spécifiques au serveur. Voici un exemple de champ dans une requête GraphQL.

query {
    team {
        id
        name
    }
}

Le serveur répond par un document JSON dont la structure reflète la requête :

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

Dans l'exemple GraphQL ci-dessus, nous interrogeons le serveur pour obtenir le champ « team » et ses sous-champs, tels que « id » et « name ». Le serveur GraphQL nous renvoie exactement les données demandées.

2. Arguments

In REST, nous ne pouvons passer qu'un seul ensemble d'arguments comme URL segments et paramètres de requête. Pour obtenir un profil particulier, un appel REST typique ressemblera à ceci :

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.
• Il est hiérarchique 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.

Ce JavaLa bibliothèque de scripts 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 des implémentations côté serveur de la spécification GraphQL. Ils représentent vos données sous forme d'API GraphQL, que votre programme client peut interroger. base de données.

Passerelles GraphQL

Gateway est un modèle de microservices permettant de créer un service distinct pour gérer d'autres services backend. Il offre une documentation complète et facilite la collecte de données provenant de plusieurs sources via une seule requête.

GraphQL offre une méthode efficace pour extraire les valeurs dynamiques d'une requête : les transmettre sous forme de dictionnaire séparé. Ces valeurs sont appelées variables. Lorsque nous travaillons avec des variables, nous devons effectuer les trois opérations suivantes :

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 son ensemble. Tout d'abord, la requête, qui déclare la variable :

query HeroNameAndFriends($episode: Episode) {
    hero(episode: $episode) {
        name
        friends {
            name
        }
    }
}

Puis le dictionnaire séparé des valeurs des variables envoyé en même temps :

{
    "episode": "JEDI"
}

Et voici la réponse renvoyée par le serveur :

{
    "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.

Les requêtes sont lues et les mutations sont écrites. Un troisième type d'opération concerne les données qui changent pendant que le client est toujours connecté.

Qu'est-ce qu'un abonnement en GraphQL ?

A abonnement L'abonnement est le troisième type d'opération de la spécification GraphQL, avec les requêtes et les mutations. Une requête et une mutation s'exécutent chacune en une seule requête et une seule réponse. L'abonnement, quant à lui, maintient une connexion permanente ouverte, généralement via WebSockets, de sorte que le serveur envoie un nouveau résultat au client à chaque occurrence d'un événement spécifié.

La syntaxe est similaire à celle d'une requête, le mot-clé « subscription » remplaçant « query » :

subscription OnCommentAdded($postId: ID!) {
    commentAdded(postId: $postId) {
        id
        content
        author {
            name
        }
    }
}

En pratique, trois points distinguent les abonnements.

• Déclenché par les événements, et non par sondage : Le client manifeste son intérêt une seule fois. Aucune autre transmission n'est effectuée tant que le serveur n'a pas publié un événement correspondant, ce qui est bien moins coûteux qu'un sondage répété.
• Un champ racine par abonnement : La spécification n'autorise qu'un seul champ de niveau supérieur, contrairement à une requête qui peut en demander plusieurs simultanément.
• Meilleur gardé petit : N'actualisez que les champs dont l'interface doit se mettre à jour. Le chat en direct, les notifications et les flux de prix en temps réel en sont des exemples typiques.

Différence entre GraphQL et REST

Le tableau suivant montre la différence importante entre GraphQL et REST.

Applications et outils Open Source utilisés par GraphQL

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

• GatsbyGatsby est une application basée sur GraphQL qui peut exploiter des données provenant de plusieurs API GraphQL. Elle permet de développer des applications React statiques et côté client.
• GraphiQL: Il s'agit d'un environnement de développement intégré (IDE) qui s'intègre au navigateur et interagit également avec l'API de GraphQL. Parmi les fonctionnalités offertes par GraphiQL, on retrouve les mutations, l'interrogation de données et la saisie semi-automatique.
• Terrain de jeu GraphQL: Il s'agissait d'un EDI puissant doté d'un éditeur intégré permettant de gérer les mutations, la validation, les requêtes GraphQL, les abonnements, etc. Le développeur pouvait l'utiliser pour visualiser la structure du schéma. Ce projet est désormais abandonné et ses fonctionnalités ont été intégrées à GraphiQL.
• Prisma: Prisma est une base de données abstraccouche d'intégration, désormais fournie sous forme d'ORM à typage sûr, largement associée à un serveur GraphQL pour exposer les 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.

FAQ