Master 2IAD - 2023/2024

GraphQL

Najat Zaidane
Mohammed Sadok Sous l’encadrement de :
Réalisé par :
Oussama Ettalhaoui
Soufiane Sejjari Professeur T. Mzili
Oumaima Mouniri
 Plan de Présenation

INTRODUCTION RECAPITULATIF

XML VS JSON TP

FONCTIONNEMENT CONCLUSION
Les défis des APIs traditionnelles et l'alternative
GraphQL
 Les défis des APIs Traditionnelles

OVER-FETCHING UNDER-FETCHING COMPLEXITÉ DE

GESTION DES DONNÉES
• Réception des données • Nécessité de plusieurs
inutiles. requêtes pour l’obtention • Difficulté à maintenir la
• Exposition de des données. cohérence et
l’ensemble des données • Pas assez de données l’évolutivité.
disponibles. spécifiques fournies. • Manque de fléxibilité.
 GraphQL
Une alternative élégante pour les requêtes des
données
Introduction
Définition GraphQL
Comparatif entre GraphQL et
REST API
Technologies utilisées avec
GraphQL
Qu’est ce que c’est ce que un GrapheQL ?

• Langage de requêtes open source pour les API

• Fondé par Facebook en 2012, publié en 2015
• Permet au client de définir précisément les données
• Permet de définir exactement la structure et les attributs des
données
• Le serveur répond avec une réponse exacte et précise
vs
 Points Communs

ARCHITECTURE BASÉE CONCEPTION INDÉPENDANTE

SUR LES RESSOURCES DU LANGAGE
• Clients et serveurs
• REST et GraphQL implémentables dans
exposent les données et n'importe quel langage de
les fonctionnalités en tant programmation.
que ressources. • Communication via des
• Accès aux ressources via formats de données
des URL standards (JSON, XML)
 Différences Majeures
FONCTIONNALITÉS
| GRAPHEQL
| REST API

| |
- Flexible - Utilise des URL et verbes HTTP
|
LANGAGE DE REQUÊTE - Ne décrit que les données (GET, POST, PUT, DELETE) pour
spécifiques nécessaires définir les requêtes

| |
- Sélectif
| - Possibilité de surcharge avec
CHARGEMENT DE DONNÉES - ne renvoie que les données
des données inutiles
demandées

PERFORMANCES | - Meilleures en raison du

sélectif
| chargement
| - Peuvent être affectées par le
chargement de données inutiles
 Les technologies utilisées avec GraphQL

Serveur GraphQL Langages de Bases de données Clients GraphQL

programmation
Plusieurs frameworks et Bibliothèques pour
bibliothèques selon les envoyer des requêtes et
besoins gérer les réponses
vs
JSON VS XML
 POINTS COMMUNS

COMMUNICATION ENTRE
SERVEURS ET CLIENTS
LANGAGE LARGEMENT
utilisés pour échanger des
UTILISÉ
données entre les serveurs et les
clients dans les applications web
et les services.
 POINTS COMMUNS

STRUCTURE DE INTEROPÉRABILITÉ LISIBILITÉ PAR LES

DONNÉES peuvent être utilisés pour HUMAINS
permettent de structurer échanger des données ce qui facilite le débogage
des données de manière entre des systèmes et la maintenance.
hiérarchique. hétérogènes.
 DIFFÉRENCES

Bien que JSON et XML partagent certaines similitudes, ils présentent

également des différences significatives en termes de syntaxe, de
complexité, de support des types de données, de validation et de
performance.
SYNTAXE ET COMPLEXITÉ
• JSON utilise une syntaxe basée sur
des paires clé-valeur et des listes
ordonnées, ce qui le rend
généralement plus simple et léger
que XML.

• XML utilise des balises ouvrantes et

fermantes pour délimiter les éléments
et les attributs, ce qui peut le rendre
plus verbeux et complexe à lire et à
écrire.
 SUPPORT DES TYPES DE DONNÉES ET
VALIDATION

• JSON supporte un ensemble limité

de types de données.

• XML offre un support plus étendu

des types de données et permet de
définir des types de données
personnalisés avec XML Schema
Definition (XSD).
TRAITEMENT ET PERFORMANCE
POPULARITÉ ET ADOPTION
Fonctionnement de
GraphQL
Requêtes GraphQL
Schéma GraphQL
Types de schémas
Résolveurs
Mutations GraphQL
Subscriptions GraphQL
 REQUÊTES GRAPHQL

• Les requêtes GraphQL sont utilisées pour récupérer des données

spécifiques selon le schéma défini.
• Elles permettent aux clients de demander exactement les données
dont ils ont besoin, ce qui évite le surchargement de données
inutiles.
 SCHÉMA

• Le schéma GraphQL définit la structure des données disponibles

dans votre API.
• Il spécifie les types d'objets disponibles et les relations entre eux.
• Les types comprennent des types d'objets (comme Author dans
l'exemple suivant), des types scalaires (tels que String, Int,
Boolean) et des listes de types.
SCHÉMA
1.Définition des types de données :
• Author : Représente un auteur avec trois champs
(id,name,verified),
1.Définition des requêtes (Query) :
• authors : Une requête qui renvoie une liste d'auteurs.
• author(id: ID!) : Une requête qui renvoie un auteur
spécifique en fonction de son identifiant.
1.Exportation du schéma :
• Le schéma est exporté à partir du module sous forme de
chaîne de caractères
 TYPES DE SCHÉMAS

ROOT OBJECT SCALAR ENUM TYPES INTERFACE

SCHEMA TYPES TYPES TYPES
• DÉFINIT UN • DÉFINIT UN
• DÉFINIT LES POINTS • REPRÉSENTE DES • REPRÉSENTE DES
ENSEMBLE FINI DE ENSEMBLE DE
D'ENTRÉE DE L'API ENTITÉS OU OBJETS VALEURS
VALEURS POSSIBLES CHAMPS
GRAPHQL DANS LE SCHÉMA. INDIVIDUELLES
POUR UN CHAMP. COMMUNS À
• COMPREND LES • Définit la structure TELLES QUE DES
IMPLÉMENTER
TYPES SPÉCIAUX des données CHAÎNES, DES
PAR LES TYPES
QUERY ET renvoyées par l'API. NOMBRES ET DES
D'OBJETS.
MUTATION. BOOLÉENS.
 RÉSOLVEURS

• Les résolveurs (resolvers) sont des fonctions qui définissent

comment récupérer les données pour chaque champ d'un schéma
GraphQL.
• Chaque champ dans le schéma GraphQL est associé à un
résolveur qui spécifie comment obtenir la valeur de ce champ.
• Les résolveurs peuvent interagir avec une base de données,
appeler d'autres API, effectuer des calculs ou récupérer des
données à partir de différentes sources.
 RÉSOLVEURS
Les résolveurs (resolvers) spécifient
comment récupérer les données pour
chaque champ du schéma,par
Exemple :
 UTILISATION DES SCHÉMAS
ET RÉSOLVEURS
Les schémas et les résolveurs sont
utilisés ensemble pour créer une API
GraphQL fonctionnelle.
 MUTATIONS

Tout comme les requêtes GraphQL fournissent des points d'entrée

pour la lecture des données, les mutations GraphQL sont des points
d'entrée sur un serveur GraphQL qui offrent un accès en écriture à nos
sources de données. Fondamentalement, chaque fois que nous avons
besoin de modifier des données (c'est-à-dire créer, mettre à jour,
supprimer des données) sur notre source de données, nous le ferons
via les mutations GraphQL
 STRUCTURE D'UNE MUTATION

NOM DE LA MUTATION ARGUMENTS TYPES DE RETOUR

Les arguments sont les Les types de retour définissent
Chaque mutation doit avoir un
paramètres nécessaires à les données que la mutation
nom unique qui décrit l'action
l'exécution de la mutation. Ils renvoie une fois qu'elle est
qu'elle effectue. Le nom de la
peuvent être de différents types exécutée avec succès. Cela peut
mutation est utilisé pour
et peuvent être obligatoires ou inclure les champs modifiés ou
invoquer la mutation dans les
facultatifs en fonction de la toute autre information
requêtes GraphQL.
logique métier de la mutation pertinente pour le client
CRUD : CREATION
Cette mutation permet de
créer une nouvelle option
avec le nom spécifié. Une
fois la mutation exécutée
avec succès, elle renvoie le
nom de l'option créée.
CRUD : UPDATE
Cette mutation permet de mettre à jour
une option existante avec l'identifiant
spécifié "$updateOptionId" en lui donnant
un nouveau nom "$name". Une fois la
mutation exécutée avec succès, elle
renvoie l'identifiant et le nouveau nom de
l'option mise à jour.
CRUD : DELETE

Cette mutation permet de supprimer

une option existante avec l'identifiant
spécifié "$deleteOptionId".Une fois la
mutation exécutée avec succès, elle
renvoie l'identifiant de l’option
suprimer
 MUTATIONS AVANCÉES

• Bulk Mutations : Les "Bulk Mutations" permettent d'effectuer plusieurs opérations de

modification en une seule requête, ce qui réduit le nombre de requêtes nécessaires et
améliore les performances.
• Nested Mutations : Les "Nested Mutations" permettent de créer des opérations de
modification imbriquées, où une mutation principale peut déclencher des mutations
secondaires sur des objets liés.

Les mutations avancées offrent une flexibilité et une efficacité supplémentaires pour manipuler les
données dans une API GraphQL, ouvrant la porte à une mise en œuvre plus élaborée et efficace des
fonctionnalités de l'application.
 SUBSCRIPTIONS

Les Subscriptions sont une fonctionnalité avancée de GraphQL qui

permet aux clients de recevoir des mises à jour en temps réel
lorsqu'un événement spécifique se produit du côté du serveur.
Contrairement aux requêtes et aux mutations qui sont des opérations
ponctuelles, les subscriptions établissent une connexion persistante
entre le client et le serveur, permettant un flux continu de données.
 FONCTIONNEMENT DES
SUBSCRIPTIONS
• Le client envoie une requête de subscription au serveur GraphQL, spécifiant l'événement
auquel il souhaite s'abonner.
• Le serveur traite la requête de subscription et ouvre un canal de communication
bidirectionnel avec le client.
• Lorsque l'événement spécifié se produit, le serveur envoie des mises à jour aux clients
abonnés via ce canal.

Les subscriptions offrent une manière puissante et efficace de mettre en œuvre des
fonctionnalités en temps réel dans les applications GraphQL, améliorant ainsi l'expérience
utilisateur et ouvrant la porte à de nombreuses applications innovantes.
 IMPLEMENTATION DES
SUBSCRIPTIONS

Dans cet exemple, nous définissons une subscription "newMessage" qui notifie les clients lorsqu'un nouveau
message est envoyé. Le serveur envoie alors les détails du message (id, contenu, auteur) aux clients abonnés.
 RÉCAPITULATIF
• Syntaxe déclarative permettant de spécifier précisément les données
nécessaires.
• Typage fort assurant la cohérence des données et une meilleure

GraphQL
documentation.
• Résolution de champs flexible pour récupérer des données de
diverses sources.
• Récupération multiple de données en une seule requête, réduisant les
appels réseau.
• Prise en charge des abonnements en temps réel pour les mises à jour
instantanées.
 TP

CLIENT SERVER
TECHNOLOGIE
• Reactjs + Vite: React.js est une bibliothèque JavaScript pour créer des
interfaces utilisateur interactives et dynamiques, basée sur des
composants réutilisables et une gestion efficace de la virtual DOM pour
des performances optimales.
• Tailwind CSS: Un framework CSS-in-JS qui vous permet de créer des
interfaces utilisateur responsives et personnalisées en utilisant des
classes utilitaires.
• Shadcn: Une bibliothèque open source de composants React qui vous
permet de créer des interfaces utilisateur mobiles élégantes et
performantes.
• Apollo: Une bibliothèque open-source pour la gestion des opérations
GraphQL côté serveur.
 TP
GITHUB
1.Clonage : Téléchargez une copie locale du projet.
2.Installer les dépendances pour chaque projet .
3.Modifications : Effectuez les modifications nécessaires.
4.lien de client: https://github.com/MohammedSadok/graphql-client
5.lien de serveur: https://github.com/MohammedSadok/graphql-server
 CONCLUSION

Limites de Graphql :
• Courbe d'apprentissage initiale pour les développeurs.
• Complexité de la mise en œuvre côté serveur.
• Risque de surcharge des requêtes.
• Gestion de la sécurité requérant une attention particulière.
 THANK YOU

Master Ingenierie Informatique et

Presentation de GraphQL
analyse de donnees