Vos premières requêtes GraphQL
GraphQL ! L'outil dont tout le monde parle en ce moment dans le monde du développement… Aujourd'hui, et pour faire écho au
très bon article de James sur le sujet, je vous en dis un peu plus.
Nous allons voir comment utiliser des APIs
GraphQL, puis nous manipulerons quelques requêtes 'basiques'. Rien à voir avec le titre d'Orelsan on est bien d'accord.
Bien sûr, si vous êtes bloqués sur des requêtes plus complexes, vous pouvez aussi nous laisser un commentaire. Nous serons ravis de vous faire profiter de notre expertise !
Pour nous permettre de nous amuser et tester les requêtes, nous utiliserons
SWAPI. C'est un environnement
GraphQL en ligne. Il utilise une base de données et des schémas qui tournent autour de l'univers de
Star-Wars. Clin d'œil aux fans de la première heure !
GraphiQL
Si vous avez cliqué sur le lien
SWAPI ci-dessus, vous verrez l'interface de
GraphiQL qui est un outil très souvent ajouté dans un environnement
GraphQL.
Si vous ne l'avez pas dans votre projet, les procédures d'ajouts sont décrites ici :
https://github.com/graphql/graphiql
Voici son interface :
Pour vous re-situer, nous sommes du côté du 'Front Developer' qui va devoir créer ses propres requêtes. Son but ? Récupérer et afficher les données qu'il souhaite. Dans notre cas, le développeur Back a déjà crée les schémas (
détaillés dans un futur article) couplés à l'API
Star-Wars. Cela permet d'avoir accès (
voir Zone 5) à une documentation complète sur tous les appels disponibles avec leurs arguments.
Bien sur
GraphiQL n'est pas une obligation ! Des outils comme
Postman/
Insomnia permettent, dans une moindre mesure, de faire des appels
GraphQL.
Rentrons dans le vif du sujet : les requêtes !
Les premières requêtes
Les requêtes
GraphQL sont des objets
JSON. Ils sont composés de clés/valeurs et d'accolades. Vous aurez compris qu'il faut les saisir dans la
Zone 1 et que vous aurez les résultats dans la
Zone 2
-
Commençons avec une requête de récupération très simple.
Nous allons récupérer tous les films
Star-Wars avec leurs titres.
Vous pouvez voir qu'il suffit de suivre les noeuds et de demander les champs dont nous avons besoin.
Dans le cadre d'une récupération de données,
GraphQL permet également de filtrer les données avec des arguments sur un champ. Dans cet exemple je récpuère les informations du 6ième film
Star-Wars via son ID:
Point syntaxique très important. Vous l'avez surement remarqué, la clé de l'objet en résultat équivaut au nom du champ côté requête. Il faut donc un moyen de renommer les clés via des alias.
Ici je crée une requête '
MesFilms'. Je veux récupérer les données des épisodes 4 et 6. Ma requête portant sur le même objet, je renomme mes clés pour les résultats en 'episode4' et 'episode6'
La requête précédente avec les alias fonctionne mais nous récupérons les mêmes informations sur les films pour les 2 épisodes. Il s'agit de ce qu'on appelle la duplication. Ce n'est ni très propre, ni réutilisable. Cela traduit et introduit très rapidement la notion de fragments qui ne sont rien de plus qu'une factorisation d'informations :
Bilan : Nous sommes accro !
Nous pouvons tirer un bilan plutôt positif de ces débuts :
- Prise en main rapide et facile : format JSON, système de clés côté requête ET résultats.
- Environnement de travail simplifié : GraphiQL, comme vu précédemment, est un outil très simple qui nous permet de visualiser l'ensemble des APIs et des typages.
- Souplesse : Avec ces diverses manipulations, on remarque que le travail du développeur Front devient clair et rapide. Il y a moins d'échanges et de répercutions par rapport à des APIs classiques (REST ...).
Voilà, on se quitte ici ! Juste le temps de vous laisser vous familiariser avec vos premières requêtes !
Restez connecté, dans le prochain article, nous aborderons les requêtes
un peu beaucoup plus complexes pour devenir de réels découpeurs de requêtes
GraphQL !