GraphQL - Requête
Une opération GraphQL peut être une opération de lecture ou d'écriture. Une requête GraphQL est utilisée pour lire ou récupérer des valeurs tandis qu'une mutation est utilisée pour écrire ou publier des valeurs. Dans les deux cas, l'opération est une simple chaîne qu'un serveur GraphQL peut analyser et répondre avec des données dans un format spécifique. Le format de réponse populaire généralement utilisé pour les applications mobiles et Web est JSON.
La syntaxe pour définir une requête est la suivante -
//syntax 1
query query_name{ someField }
//syntax 2
{ someField }Voici un exemple de requête -
//query with name myQuery
query myQuery{
greeting
}
// query without any name
{
greeting
}Il ressort clairement de l'exemple ci-dessus que le mot-clé de requête est facultatif.
Les requêtes GraphQL aident à réduire la surextraction de données. Contrairement à une API Restful, GraphQL permet à un utilisateur de restreindre les champs qui doivent être récupérés sur le serveur. Cela signifie des requêtes plus petites et moins de trafic sur le réseau; ce qui réduit à son tour le temps de réponse.
Illustration 1 - Modèle d'étudiant de requête avec un champ personnalisé
Dans cet exemple, nous avons un ensemble d'étudiants stockés dans un fichier json. Chaque modèle étudiant a des champs comme firstName, lastName et id mais pas de fullName. Ici, nous verrons comment créer une requête pour récupérer le nom complet de tous les étudiants. Pour cela, nous devons créer un champ fullName dans les deux résolveurs de schéma.
Voyons comment faire cette illustration en utilisant les étapes ci-dessous -
Étape 1 - Téléchargez et installez les dépendances requises pour le projet
Créez un dossier nommé query-app. Changez votre répertoire enquery-appdepuis le terminal. Plus tard, suivez les étapes 3 à 5 expliquées dans le chapitre Configuration de l'environnement.
Étape 2 - Créer un schéma
Ajouter schema.graphql fichier dans le dossier de projet query-app et ajoutez le code suivant -
type Query {
greeting:String
students:[Student]
studentById(id:ID!):Student
}
type Student {
id:ID!
firstName:String
lastName:String
fullName:String
}Notez qu'il n'y a pas de champ fullName dans lestudents.jsonfichier. Cependant, nous devons récupérer le nom complet de l'étudiant via une requête. Le fullName , dans ce cas, sera un champ personnalisé qui n'est pas disponible avec la source de données.
Étape 3 - Créer un résolveur
Créer un fichier resolvers.js dans le dossier du projet et ajoutez le code suivant -
const db = require('./db')
const Query = {
//resolver function for greeting
greeting:() => {
return "hello from TutorialsPoint !!!"
},
//resolver function for students returns list
students:() => db.students.list(),
//resolver function for studentbyId
studentById:(root,args,context,info) => {
//args will contain parameter passed in query
return db.students.get(args.id);
}
}
//for each single student object returned,resolver is invoked
const Student = {
fullName:(root,args,context,info) => {
return root.firstName+":"+root.lastName
}
}
module.exports = {Query,Student}Étape 4 - Exécutez l'application
Créer un server.jsfichier. Reportez-vous à l'étape 8 du chapitre Configuration de l'environnement. Exécutez la commande npm start dans le terminal. Le serveur sera opérationnel sur le port 9000. Ici, nous utilisons GraphiQL comme client pour tester l'application.
Ouvrez le navigateur et saisissez l'URL http://localhost:9000/graphiql. Tapez la requête suivante dans l'éditeur -
{
students{
id
fullName
}
}La réponse à la requête est donnée ci-dessous -
{
"data": {
"students": [
{
"id": "S1001",
"fullName": "Mohtashim:Mohammad"
},
{
"id": "S1002",
"fullName": "Kannan:Sudhakaran"
},
{
"id": "S1003",
"fullName": "Kiran:Panigrahi"
}
]
}
}Créer un server.js et ajoutez le code suivant -
const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');
const db = require('./db');
const port = 9000;
const app = express();
//loading type definitions from schema file
const fs = require('fs')
const typeDefs = fs.readFileSync('./schema.graphql',{encoding:'utf-8'})
//loading resolvers
const resolvers = require('./resolvers')
//binding schema and resolver
const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs, resolvers})
//enabling cross domain calls and form post
app.use(cors(), bodyParser.json());
//enabling routes
const {graphiqlExpress,graphqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
//registering port
app.listen(port, () => console.info(`Server started on port ${port}`));Exécutez la commande npm start dans le terminal. Le serveur sera opérationnel sur le port 9000. Ici, nous utilisons GraphiQL comme client pour tester l'application.
Ouvrez le navigateur et saisissez l'URL http://localhost:9000/graphiql. Tapez la requête suivante dans l'éditeur -
{
students{
id
fullName
}
}La réponse à la requête est donnée ci-dessous -
{
"data": {
"students": [
{
"id": "S1001",
"fullName": "Mohtashim:Mohammad"
},
{
"id": "S1002",
"fullName": "Kannan:Sudhakaran"
},
{
"id": "S1003",
"fullName": "Kiran:Panigrahi"
}
]
}
}Illustration 2 - Requête imbriquée
Créons une requête imbriquée pour récupérer les détails de l'étudiant et les détails de son collège. Nous travaillerons avec le même dossier de projet.
Étape 1 - Modifier le schéma
Le fichier de schéma contient déjà le champ étudiant . Ajoutons un collège de terrain et définissons son type.
type College {
id:ID!
name:String
location:String
rating:Float
}
type Student {
id:ID!
firstName:String
lastName:String
fullName:String
college:College
}Étape 2 - Modifiez le resolver.js
Nous devons ajouter une fonction de résolution d'université comme ci-dessous. La fonction de résolution du collège sera exécutée pour chaque objet étudiant renvoyé. Dans ce cas, le paramètre racine du résolveur contiendra student .
const Student = {
fullName:(root,args,context,info) => {
return root.firstName+":"+root.lastName
},
college:(root) => {
return db.colleges.get(root.collegeId);
}
}
module.exports = {Query,Student}Le résolveur renvoie le collège de chaque étudiant en appelant la méthode get de la collecte du collège et en passant le collegeId . Nous avons une relation d'association entre étudiant et collège par le biais de collegeId .
Étape 3 - Testez l'application
Ouvrez la fenêtre du terminal et accédez au dossier du projet. Tapez la commande -npm start. Lancez le navigateur et entrez l'URLhttp://localhost:9000/graphiql.
Entrez la requête suivante dans la fenêtre GraphiQL -
{
students{
id
firstName
college {
id
name
location
rating
}
}
}La réponse à la requête est la suivante -
{
"data": {
"students": [
{
"id": "S1001",
"firstName": "Mohtashim",
"college": {
"id": "col-102",
"name": "CUSAT",
"location": "Kerala",
"rating": 4.5
}
},
{
"id": "S1002",
"firstName": "Kannan",
"college": {
"id": "col-101",
"name": "AMU",
"location": "Uttar Pradesh",
"rating": 5
}
},
{
"id": "S1003",
"firstName": "Kiran",
"college": {
"id": "col-101",
"name": "AMU",
"location": "Uttar Pradesh",
"rating": 5
}
}
]
}
}Qu'est-ce qu'une variable de requête?
Si une requête a des valeurs dynamiques à transmettre, représentez ces valeurs dynamiques à l'aide de variables. Par conséquent, la requête peut être réutilisée par les applications clientes.
Illustration
Créons une application simple pour comprendre la variable de requête.
Étape 1 - Modifier le fichier de schéma
Ajoutez un champ sayHello qui prend un paramètre de chaîne et renvoie une chaîne. Les valeurs de nom seront dynamiques dans l'application cliente.
type Query {
sayHello(name:String!):String
}Étape 2 - Modifier le fichier resolver.js
Ajoutez un résolveur sayHello qui prend le paramètre comme ci-dessous -
sayHello:(root,args,context,info) => `Hi ${args.name} GraphQL server says Hello to you!!`Étape 3 - Déclarer la variable de requête dans GraphiQL
Une variable est déclarée avec $ suivi du nom de la variable. Par exemple: $ myname_Variable.
Une fois que $ myname_Variable est déclaré, il doit être utilisé avec une syntaxe de requête nommée. La requête, myQuery prend la valeur de la chaîne et la transmet à sayHello comme indiqué ci-dessous -
query myQuery($myname_Variable:String!) {
sayHello(name:$myname_Variable)
}Définissez la valeur de $ myname_Variable en tant qu'objet JSON dans la section Variables de requête du client GraphiQL.
{
"myname_Variable": "Mohtashim"
}La sortie du code ci-dessus est la suivante -
{
"data": {
"sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
}
}
Comment utiliser la variable de requête avec Enum
Voyons comment utiliser une variable de requête lorsque le paramètre de champ est enum type.
Étape 1 - Modifier le fichier schema.graphql
enum ColorType {
RED
BLUE
GREEN
}
type Query {
setFavouriteColor(color:ColorType):String
}La fonction setFavouriteColor prend enum comme entrée et renvoie une valeur de chaîne.
Étape 2 - Modifier le fichier resolvers.js
La fonction de résolution setFavouriteColor prend racine et args . La valeur enum transmise à la fonction lors de l'exécution est accessible via le paramètre args.
setFavouriteColor:(root,args) => {
return "Your Fav Color is :"+args.color;
}Étape 3 - Déclarer une variable de requête dans GraphiQL
La requête est nommée query_to_setColorqui prend une variable du nom color_variable de ColorType. Cette variable est transmise à la méthode setFavouriteColor.
query query_to_setColor($color_variable:ColorType) {
setFavouriteColor(color:$color_variable)
}Dans la section de variable de requête de GraphiQL, tapez le code suivant -
{
"color_variable":"RED"
}La réponse est indiquée ci-dessous -
{
"data": {
"setFavouriteColor": "Your Fav Color is: RED"
}
}