GraphQL est un langage de requête qui permet des requêtes hautement personnalisables sur les interfaces de programmation d’applications (API). GraphQL est en plein essor et est actuellement utilisé dans des applications de niveau de production par PayPal, Netflix, Shopify, Github et Airbnb.
Ce tutoriel explique comment exécuter une requête GraphQL simple. Les prérequis pour ce didacticiel sont une compréhension de base de Node.js, du framework Web Express.js pour Node et du fonctionnement des requêtes HTTP. GraphQL est un langage de requête et fonctionnera avec des environnements autres que l’environnement Node/Express mais ce tutoriel fonctionne avec Node/Express.
Prise en main et installation des dépendances
npm init (cela créera le nouveau projet Node et package.json)
Les dépendances suivantes seront utilisées pour ce projet.
- Express
- graphql
- express-graphql
- axios
La seule dépendance dev sera un nodemon.
Tout d’abord, construisez les scripts. Dans le package.json, vous devrez écrire deux scripts qui redémarrent le serveur à chaque modification. Les scripts sont les suivants :
La dernière partie de la configuration initiale est l’arborescence des fichiers. J’ai seulement besoin d’ajouter deux fichiers pour cela : server.js et schema.js.
Construire le serveur express
Je vais avoir besoin de trois éléments pour que ce serveur fonctionne : express, express-graphql et schema. En plus de ça. Je vais également créer une variable d’application qui est une instance de express(), définir le port comme 3000 et configurer la fonctionnalité app.listen.
À ce stade, mon server.js ressemble à ceci :
Le module graphqlHTTP fournit un moyen simple de créer un serveur Express qui exécute une API GraphQL. Ce projet n’aura qu’un seul gestionnaire d’itinéraire, app.use. Lors de l’utilisation de graphQLHTTP, la fonctionnalité app.use est définie sur un point de terminaison suivi de la variable graphqlHTTP. Tt connectera Express à graphQL et à ses fonctionnalités associées.
Pour plus de lecture à ce sujet, consultez la documentation GraphQL et le lien vers GitHub Read Me, qui est également incroyablement utile, est ici.
Pour cet exercice, c’était vraiment aussi simple que de copier et coller à partir du GitHub Lisez-moi, assurez-vous simplement de faire correspondre le nom du schéma au nom de la variable de schéma en haut du fichier. graphiql:true fait référence au point de terminaison /graphql pointant vers la plate-forme de test de requêtes de graphql, GraphiQL (pensez-y comme le Postman pour GraphQL).
server.js ressemblera maintenant à ceci.
Construire le schéma
La construction de schémas et de types de requêtes ne fait que décrire les champs entrants attendus et les types de données qu’ils sont (chaîne, tableau, booléen). Le formatage, bien que spécifique à GraphQL, est similaire à tout autre concept de codage. Ce n’est pas nouveau, juste différent. Ce projet interroge une API tierce, l’API publique de Star Wars. Les étapes sont donc répertoriées ci-dessous :
- définir les données attendues de l’API
- Construire l’objet de requête
- Exporter le schéma
Je vais exiger dans axios. La prochaine chose que je vais commencer à exiger, ce sont les types GraphQL. Voici un guide des types GraphQL. https://graphql.org/graphql-js/type/
J’utilise définitivement GraphQLObjectType et GraphQLSchema pour pouvoir les exiger en premier. Il ressemblera à ceci pour l’instant :
Je vais travailler avec l’API publique de Star Wars. Je vais interroger les données sur les personnes. Je peux voir dans la section des personnes que chaque point de données a son type répertorié à côté. Je vais interroger le nom, l’année de naissance, les vaisseaux spatiaux et les véhicules, je devrai donc importer le GraphQLString et le GraphQLList en plus du GraphQLObjectType et du GraphQLSchema.
Définition de la forme des données – l’objet PeopleType
Le premier GraphQLObject est le PeopleType :
L’objet de type de personnes décrira les champs que l’utilisateur peut interroger à partir de l’API et les types de données que la requête peut s’attendre à recevoir. Les paires clé-valeur de cet objet sont les suivantes :
|
Nom: ‘Chaîne de caractères‘, des champs: () =>({ point de données:{ taper: type_attendu } }) |
L’objet PeopleType finira par ressembler à ceci :
Définition de l’objet de requête racine
Il s’agit également d’un GraphQLObjectType car tous les objets construits dans le schéma sont de type GraphQLObject mais la structure à l’intérieur est différente. La structure intérieure ressemblera à ceci :
|
Nom: ‘Chaîne de caractères‘, des champs: { nom_requête: { taper: taper de Les données attendu de la requête, résoudre: ( ) => { fonction demander interrogé Les données } } } |
En copiant et collant https://swapi.dev/api/people dans le navigateur, il est clair que la clé “results” fournit un tableau de tous les objets people. Ainsi, le type de données à interroger est un tableau d’objets de personnes, donc dans le type, ce sera un nouveau GraphQLList (PeopleType).
À l’intérieur de la fonction de résolution se trouvera la demande de données Axios. Cela ressemblera à n’importe quelle autre demande d’obtention d’Axios. L’objet finira par ressembler à ceci.
La dernière étape consiste à exporter le schéma, ce qui est incroyablement simple.
Pour référence, le fichier schema.js complet ressemblera à ceci.
Exécutez la commande sever suivie de npm start et pointez le navigateur vers localhost:3000/graphql.
Travailler avec GraphiQL
Démarrer une requête est aussi simple que {}. Tapez le p et un menu apparaîtra indiquant les personnes. Ouvrez à nouveau les accolades et les champs de saisie à interroger. Appuyez sur play et visualisez les données collectées.
Ils peuvent être interrogés ensemble ou individuellement.
Pour un exemple de dépannage d’erreur, revenez au fichier de code et remplacez res.data.results par juste res.data et exécutez la requête et vérifiez ce qu’elle dit.
L’un des attributs de GraphQL est que les données sont imbriquées, et avec des requêtes plus intensives, les données peuvent être profondément imbriquées et cela peut prendre un certain temps pour trouver où se trouvent ces données. Une partie de la gestion des erreurs consiste simplement à s’assurer que tout est aligné.
Pour en savoir plus sur l’exécution des requêtes GraphQL, veuillez consulter la documentation GraphQL sur l’exécution.
The New Stack est une filiale en propriété exclusive d’Insight Partners, un investisseur dans les sociétés suivantes mentionnées dans cet article : Postman.