GraphQL - Consulta
Una operación GraphQL puede ser una operación de lectura o escritura. Una consulta GraphQL se usa para leer o recuperar valores, mientras que una mutación se usa para escribir o publicar valores. En cualquier caso, la operación es una cadena simple que un servidor GraphQL puede analizar y responder con datos en un formato específico. El formato de respuesta popular que se usa generalmente para aplicaciones móviles y web es JSON.
La sintaxis para definir una consulta es la siguiente:
//syntax 1
query query_name{ someField }
//syntax 2
{ someField }
A continuación se muestra un ejemplo de una consulta:
//query with name myQuery
query myQuery{
greeting
}
// query without any name
{
greeting
}
Del ejemplo anterior se desprende claramente que la palabra clave de consulta es opcional.
Las consultas GraphQL ayudan a reducir la recuperación excesiva de datos. A diferencia de una API Restful, GraphQL permite al usuario restringir los campos que deben obtenerse del servidor. Esto significa consultas más pequeñas y menor tráfico en la red; lo que a su vez reduce el tiempo de respuesta.
Ilustración 1: Consultar modelo de alumno con un campo personalizado
En este ejemplo, tenemos un conjunto de estudiantes almacenados en un archivo json. Cada modelo de estudiante tiene campos como firstName, lastName e id, pero no fullName. Aquí, discutiremos cómo realizar una consulta para recuperar el nombre completo de todos los estudiantes. Para esto, necesitamos crear el campo fullName en ambos sistemas de resolución de esquemas.
Veamos cómo hacer esta ilustración siguiendo los pasos a continuación:
Paso 1: descargue e instale las dependencias necesarias para el proyecto
Crea una carpeta llamada query-app. Cambie su directorio aquery-appdesde la terminal. Posteriormente, siga los pasos 3 a 5 explicados en el capítulo Configuración del entorno.
Paso 2: crea un esquema
Añadir schema.graphql en la carpeta del proyecto query-app y agregue el siguiente código:
type Query {
greeting:String
students:[Student]
studentById(id:ID!):Student
}
type Student {
id:ID!
firstName:String
lastName:String
fullName:String
}
Tenga en cuenta que no hay un campo fullName en elstudents.jsonarchivo. Sin embargo, necesitamos buscar el nombre completo del estudiante mediante una consulta. El fullName , en este caso, será un campo personalizado que no está disponible con la fuente de datos.
Paso 3: crear un solucionador
Crea un archivo resolvers.js en la carpeta del proyecto y agregue el siguiente código:
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}
Paso 4: ejecutar la aplicación
Crear un server.jsarchivo. Consulte el paso 8 del capítulo Configuración del entorno. Ejecute el comando npm start en la terminal. El servidor estará funcionando en el puerto 9000. Aquí, usamos GraphiQL como cliente para probar la aplicación.
Abra el navegador y escriba la URL http://localhost:9000/graphiql. Escriba la siguiente consulta en el editor:
{
students{
id
fullName
}
}
La respuesta para la consulta se da a continuación:
{
"data": {
"students": [
{
"id": "S1001",
"fullName": "Mohtashim:Mohammad"
},
{
"id": "S1002",
"fullName": "Kannan:Sudhakaran"
},
{
"id": "S1003",
"fullName": "Kiran:Panigrahi"
}
]
}
}
Crear un server.js y agregue el siguiente código -
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}`));
Ejecute el comando npm start en la terminal. El servidor estará funcionando en el puerto 9000. Aquí, usamos GraphiQL como cliente para probar la aplicación.
Abra el navegador y escriba la URL http://localhost:9000/graphiql. Escriba la siguiente consulta en el editor:
{
students{
id
fullName
}
}
La respuesta para la consulta se da a continuación:
{
"data": {
"students": [
{
"id": "S1001",
"fullName": "Mohtashim:Mohammad"
},
{
"id": "S1002",
"fullName": "Kannan:Sudhakaran"
},
{
"id": "S1003",
"fullName": "Kiran:Panigrahi"
}
]
}
}
Ilustración 2 - Consulta anidada
Creemos una consulta anidada para obtener los detalles del estudiante y sus datos universitarios. Trabajaremos con la misma carpeta de proyecto.
Paso 1: editar el esquema
El archivo de esquema ya tiene el campo de estudiante . Agreguemos una escuela de campo y definamos su tipo.
type College {
id:ID!
name:String
location:String
rating:Float
}
type Student {
id:ID!
firstName:String
lastName:String
fullName:String
college:College
}
Paso 2: modificar resolver.js
Necesitamos agregar una función de resolución de la universidad como se muestra a continuación. La función de resolución de la universidad se ejecutará para cada objeto de estudiante devuelto. El parámetro raíz del resolver en este caso contendrá 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}
El solucionador devuelve la universidad de cada estudiante llamando al método get de colección universitaria y pasando el collegeId . Tenemos una relación de asociación entre el estudiante y la universidad a través del collegeId .
Paso 3: prueba la aplicación
Abra la ventana del terminal y navegue hasta la carpeta del proyecto. Escriba el comando -npm start. Inicie el navegador e ingrese la URLhttp://localhost:9000/graphiql.
Ingrese la siguiente consulta en la ventana GraphiQL -
{
students{
id
firstName
college {
id
name
location
rating
}
}
}
La respuesta a la consulta es la siguiente:
{
"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é es una variable de consulta?
Si una consulta tiene algunos valores dinámicos para pasar, entonces represente estos valores dinámicos usando variables. Por tanto, las aplicaciones cliente pueden reutilizar la consulta.
Ilustración
Creemos una aplicación simple para comprender la variable de consulta.
Paso 1: editar el archivo de esquema
Agregue un campo sayHello que toma un parámetro de cadena y devuelve una cadena. Los valores de los nombres serán dinámicos en la aplicación cliente.
type Query {
sayHello(name:String!):String
}
Paso 2: editar el archivo resolver.js
Agregue un solucionador sayHello que toma el parámetro de la siguiente manera:
sayHello:(root,args,context,info) => `Hi ${args.name} GraphQL server says Hello to you!!`
Paso 3: declarar la variable de consulta en GraphiQL
Una variable se declara con $ seguido del nombre de la variable. Por ejemplo: $ myname_Variable.
Una vez que se declara $ myname_Variable, debe usarse con una sintaxis de consulta con nombre. La consulta, myQuery toma el valor de la cadena y lo pasa a sayHello como se muestra a continuación:
query myQuery($myname_Variable:String!) {
sayHello(name:$myname_Variable)
}
Establezca el valor de $ myname_Variable como un objeto JSON en la sección Variables de consulta del cliente GraphiQL.
{
"myname_Variable": "Mohtashim"
}
La salida del código anterior es la siguiente:
{
"data": {
"sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
}
}
Cómo usar la variable de consulta con Enum
Veamos cómo usar una variable de consulta cuando el parámetro de campo es enum type.
Paso 1: editar el archivo schema.graphql
enum ColorType {
RED
BLUE
GREEN
}
type Query {
setFavouriteColor(color:ColorType):String
}
La función setFavouriteColor toma enum como entrada y devuelve un valor de cadena.
Paso 2: editar el archivo resolvers.js
La función de resolución setFavouriteColor toma raíz y argumenta . Se puede acceder al valor de enumeración pasado a la función en tiempo de ejecución a través del parámetro args.
setFavouriteColor:(root,args) => {
return "Your Fav Color is :"+args.color;
}
Paso 3: declare una variable de consulta en GraphiQL
La consulta se llama query_to_setColorque toma una variable del nombre color_variable de ColorType. Esta variable se pasa al método setFavouriteColor.
query query_to_setColor($color_variable:ColorType) {
setFavouriteColor(color:$color_variable)
}
En la sección de variables de consulta de GraphiQL, escriba el siguiente código:
{
"color_variable":"RED"
}
La respuesta se muestra a continuación:
{
"data": {
"setFavouriteColor": "Your Fav Color is: RED"
}
}