Vos premières requêtes GraphQL

24/09/2019

Aucun commentaire

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 !

graphql-request

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 :

graphql-graphiql

 

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.

  • Argument

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:

  • Alias

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’

  • Fragments

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 !