Introduction à GraphQL
Dr. Salah Gontara
2024-25
1
Plan
1. Introduction
2. Requêtes
3. Mutations
4. Schémas et types
5. Résolution de requêtes
6. Fragments
7. Subscriptions
8. Comparaison de GraphQL avec les API REST
2
Introduction
• GraphQL est un langage de requête pour les API
• Créé par Facebook en 2012
• Open-source depuis 2015
• GraphQL est de plus en plus populaire en tant qu'alternative aux
API REST traditionnelles
• Les avantages de GraphQL incluent :
• Une seule requête pour récupérer toutes les données nécessaires
• Les clients peuvent spécifier exactement quelles données ils ont besoin
• Les développeurs peuvent évoluer leur API sans casser les clients
existants
• GraphQL est souvent utilisé avec des frameworks côté serveur tels
que Apollo, Relay et Yoga
• GraphQL peut être utilisé avec n'importe quelle technologie côté
client, y compris React, Vue et Angular
• GraphQL est adapté aux applications modernes qui nécessitent
une flexibilité élevée dans la récupération de données
3
Requêtes
• Les requêtes GraphQL sont structurées comme des documents JSON
• Une requête GraphQL se compose de champs et d'arguments
• Les champs sont des unités de données, tandis que les arguments
sont des options qui affectent la façon dont les données sont
renvoyées
• Les requêtes GraphQL ont une structure hiérarchique en forme
d'arbre, appelée "arbre de requête"
4
Requêtes
La syntaxe de base d'une requête GraphQL est la suivante :
• Dans cet exemple, field1 et field2 sont des champs, et subfield1 et subfield2 sont des sous-champs de field2
• Les requêtes peuvent également inclure des arguments pour filtrer, trier ou paginer les données
Les arguments sont définis entre parenthèses et séparés par des virgules :
5
Mutations
• Les mutations GraphQL sont utilisées pour modifier des données dans
l'API, par opposition aux requêtes qui sont utilisées pour récupérer
des données
• Elles sont définies dans le schéma GraphQL comme des champs avec
un type de retour spécifique pour représenter le résultat de la
mutation
• Elles peuvent avoir des arguments pour passer des données à
modifier et peuvent renvoyer les données modifiées ou un message
indiquant si la mutation a réussi ou échoué
• Elles sont appelées en utilisant la même syntaxe que les requêtes,
mais avec le mot-clé mutation au lieu de query
6
Mutations
• Dans cette mutation, nous passons un objet avec les informations de
l'utilisateur à créer à travers l'argument input de la mutation
• La mutation renvoie l'id et le username du nouvel utilisateur créé
7
Schémas et types
• Les schémas GraphQL décrivent les données et opérations de l'API.
• Utilisation du langage de schéma GraphQL pour la définition.
• Types et champs comme fondements des structures de données.
• Types de base: scalaires et objets; création de types personnalisés
possible.
• Champs pour propriétés des types et établissement des relations.
• Opérations de l'API pour requêtes et mutations incluses dans le
schéma.
8
Schémas et types
Le type Book a trois champs : id, title et author. Le
champ author est un objet de type Author et
représente l'auteur du livre.
Le type Author a trois champs : id, name et books. Le
champ books est une liste de livres ([Book!]) qui ont
été écrits par l'auteur.
Le type Query a quatre opérations : book, books,
author et authors. Ces opérations peuvent être
utilisées pour récupérer des données à partir de
l'API.
Le type Mutation a trois opérations : createBook,
updateBook et deleteBook. Ces opérations peuvent
être utilisées pour modifier les données dans l'API.
10
Résolution de requêtes
Les résolveurs GraphQL sont des fonctions qui implémentent la logique pour
récupérer ou modifier des données dans l’API:
• Définition pour chaque champ dans le schéma GraphQL
• Ecriture dans n'importe quel langage de programmation qui peut communiquer
avec la base de données ou le service de données sous-jacent
• Accès aux arguments de la requête et aux objets parent pour récupérer les
données dont ils ont besoin
• Renvoi des données demandées ou application des modifications demandées
dans la base de données ou le service de données sous-jacent
• Renvoi de données asynchrones: permet aux clients de recevoir des réponses
plus rapidement et d'améliorer les performances de l'API
• Renvoi d’erreurs: qui seront renvoyées aux clients sous forme de messages
d'erreur JSON
11
Résolution de requêtes
• Résolveur pour la requête books dans l'objet Query de l'objet resolvers.
• Ce résolveur utilise la fonction find() pour récupérer tous les livres dans la base de données
et la méthode populate() pour ajouter les informations de l'auteur de chaque livre.
12
Résolution de requêtes
• Résolveur pour la mutation createBook dans l'objet Mutation de l'objet resolvers.
• Ce résolveur récupère le titre et l'ID de l'auteur de la requête et utilise la fonction findById() pour récupérer
l'auteur correspondant dans la base de données.
• Si aucun auteur n'est trouvé, une erreur est renvoyée. Sinon, un nouveau livre est créé avec le titre et l'auteur
et sauvegardé dans la base de données. Enfin, le livre créé est renvoyé.
13
Fragments
• Les fragments GraphQL sont utilisés pour réutiliser des parties de
requête dans plusieurs requêtes différentes
• Les fragments sont définis en tant que blocs de code avec un nom et
une liste de champs à inclure dans le fragment
• Les fragments peuvent être utilisés dans les requêtes et les mutations
en utilisant la syntaxe « ... » suivie du nom du fragment
14
Fragments
Fragment GraphQL pour récupérer le nom et l'adresse d'un utilisateur:
Dans cette définition de fragment, nous nommons le fragment UserInfo et spécifions que nous
voulons récupérer le name et l'address d'un utilisateur
Le fragment peut ensuite être utilisé dans une requête ou une mutation comme ceci :
Dans cette requête, nous demandons les informations d'un utilisateur spécifié par son id, et nous
incluons les champs spécifiés dans le fragment UserInfo
15
Subscriptions
• Les subscriptions GraphQL permettent de recevoir des mises à jour en
temps réel des données de l'API lorsque celles-ci changent
• Les subscriptions sont définies dans le schéma GraphQL comme des
champs avec un type de retour spécifique pour représenter le flux de
données
• Les clients peuvent s'abonner à une subscription en envoyant une
requête au serveur
• Le serveur envoie ensuite des mises à jour aux clients chaque fois que
les données correspondant à la subscription changent
16
Subscriptions
Exemple de subscription GraphQL pour recevoir des mises à jour lorsqu'un nouvel utilisateur est
ajouté à une base de données :
• Dans cette subscription, nous demandons à être notifiés chaque fois qu'un nouvel utilisateur est
ajouté, et nous spécifions les champs que nous voulons recevoir dans les mises à jour
• Lorsqu'un nouvel utilisateur est ajouté, le serveur envoie une mise à jour aux clients abonnés
contenant les champs spécifiés
17
Comparaison de GraphQL avec les APIs REST
• Les API REST ont été la norme de facto pour les services web depuis
de nombreuses années
• Les API REST utilisent des méthodes HTTP (GET, POST, PUT, DELETE) pour
manipuler des ressources
• Les ressources sont généralement représentées par des endpoints, qui
peuvent être combinés pour obtenir des données plus complexes
18
Comparaison de GraphQL avec les APIs REST
• GraphQL, en revanche, utilise une approche basée sur les requêtes pour
récupérer les données, ce qui permet de récupérer toutes les données
nécessaires en une seule requête plutôt que de faire plusieurs appels à des
endpoints différents
• Cela peut être particulièrement utile pour les applications à forte intensité de
données, où de nombreuses requêtes REST peuvent entraîner une surcharge de
données et des performances médiocres
• En outre, GraphQL permet de récupérer uniquement les données dont on a besoin,
ce qui réduit la quantité de données inutiles envoyées sur le réseau
• Toutefois, les API REST peuvent être plus simples à mettre en place et plus adaptées
aux cas d'utilisation simples ou statiques
• En fin de compte, le choix entre GraphQL et les API REST dépendra du
contexte spécifique et des exigences de l'application
19
Comparaison de GraphQL avec les APIs REST
20
Comparaison de GraphQL avec les APIs REST
21
Exercice
• Définir un schéma GraphQL simple qui a un type "Product". Un produit peut avoir
• un id
• un nom
• une description
• un prix
• une catégorie
• Écrire une 1ère requête GraphQL pour récupérer tous les produits et leurs
informations correspondantes.
• Écrire une 2ème requête GraphQL pour récupérer tous les produits dans une
catégorie spécifique.
• Écrire une 3ème requête GraphQL pour récupérer un produit spécifique avec son
nom, sa description, son prix et sa catégorie.
• Écrire une 1ère mutation qui permet de créer un produit.
• Écrire une 2ème mutation qui permet de mettre à jour un produit.
• Écrire une 3ème mutation qui permet d’effacer un produit.
22
Correction v1
type Product {
id: ID!
name: String!
description: String
price: Float!
category: String!
}
type Query {
AllProducts: [Product!]!
ProductsByCategory(category: String!): [Product]!
Product(id: ID!): Product!
}
type Mutation {
createProduct(name: String!, description: String!, price: Float!, category: String!): Product!
updateProduct(id: ID!, name: String, description: String, price: Float, category: String): Product!
deleteProduct(id: ID!): ID!
}
23
Correction v2
type Product { type Query {
id: ID! AllProducts: [Product!]!
name: String! ProductsByCategory(categoryId: ID!): [Product]!
description: String Product(id: ID!): Product!
price: Float! }
category: Category!
} type Mutation {
createProduct(id: ID!, name: String!, description: String!, price: Float!,
categoryId: ID!): Product!
type Category {
updateProduct(id: ID!, name: String, description: String, price: Float,
id: ID! categoryId: ID): Product!
name: String! deleteProduct(id: ID!): ID!
products: [Product!]! }
}
24
