GraphQL - Mutación

En este capítulo, aprenderemos las consultas de mutación en GraphQL.

Las consultas de mutación modifican los datos en el almacén de datos y devuelven un valor. Se puede utilizar para insertar, actualizar o eliminar datos. Las mutaciones se definen como parte del esquema.

La sintaxis de una consulta de mutación se da a continuación:

mutation{
   someEditOperation(dataField:"valueOfField"):returnType
}

Ilustración

Comprendamos cómo agregar un nuevo registro de estudiante en el almacén de datos mediante una consulta de mutación.

Paso 1: descargue e instale las dependencias necesarias para el proyecto

Cree una carpeta de proyecto con el nombre mutation-app. Cambie su directorio a mutation-app desde la terminal. Siga los pasos 3 a 5 explicados en el capítulo Configuración del entorno.

Paso 2: crear un archivo schema.graphql

Añadir schema.graphql archivo en la carpeta del proyecto mutation-app y agregue el siguiente código:

type Query {
   greeting:String
}

type Mutation {
   createStudent(collegeId:ID,firstName:String,lastName:String):String
}

Tenga en cuenta que la función createStudent devuelve un tipo de cadena. Este es un identificador (ID) único que se genera después de crear un estudiante.

Paso 3: crea un archivo resolver.js

Cree un archivo resolvers.js en la carpeta del proyecto y agregue el siguiente código:

const db = require('./db')
const Mutation = {
   createStudent:(root,args,context,info) => {
      return db.students.create({collegeId:args.collegeId,
      firstName:args.firstName,
      lastName:args.lastName})
   }
}
const Query = {
   greeting:() => "hello"
}

module.exports = {Query,Mutation}

La función de mutación apunta a la recopilación de estudiantes en el almacén de datos. Para agregar un nuevo alumno , invoque el método de creación en la colección de alumnos. El objeto args contendrá los parámetros que se pasan en la consulta. El método de creación de la colección de estudiantes devolverá la identificación de un objeto de estudiante recién creado.

Paso 4: ejecutar la aplicación

Crear un server.jsarchivo. Consulte el paso 8 en el 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.

El siguiente paso es abrir el navegador y escribir la URL http://localhost:9000/graphiql. Escriba la siguiente consulta en el editor:

//college Id should be matched with data from colleges.json for easy retrieval

mutation {
   createStudent(collegeId:"col-2",firstName:"Tim",lastName:"George")
}

La consulta anterior creará un objeto de estudiante en el archivo student.json. La consulta devolverá un identificador único. La respuesta de la consulta es la que se muestra a continuación:

{
   "data": {
      "createStudent": "SkQtxYBUm"
   }
}

Para verificar si se creó el objeto de estudiante, podemos usar la consulta studentById. También puede abrir el archivo Students.json desde la carpeta de datos para verificar la identificación.

Para usar la consulta studentById, edite el schema.graphql como se indica a continuación -

type Query {
   studentById(id:ID!):Student
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   collegeId:String
}

Edite el resolver.js archivo como se indica a continuación -

const db = require('./db')
const Query = {
   studentById:(root,args,context,info) => {
      return db.students.get(args.id);
   }
}

const Mutation = {
   createStudent:(root,args,context,info) => {
      return db.students.create({collegeId:args.collegeId,
      firstName:args.firstName,
      lastName:args.lastName})
   }
}

module.exports = {Query,Mutation}

A continuación se muestra la consulta para obtener el estudiante por identificación única devuelta de la consulta de mutación:

{
    studentById(id:"SkQtxYBUm") {
    id
    firstName
    lastName
  }
}

La respuesta del servidor es la siguiente:

{
   "data": {
      "studentById": {
         "id": "SkQtxYBUm",
         "firstName": "Tim",
         "lastName":"George"
      }
   }
}

Devolución de un objeto en mutación

Es una buena práctica devolver un objeto en mutación. Por ejemplo, la aplicación cliente desea obtener detalles de estudiantes y universidades. En este caso, en lugar de realizar dos solicitudes diferentes, podemos crear una consulta que devuelva un objeto que contiene los detalles de los estudiantes y sus universidades.

Paso 1: editar el archivo de esquema

Agregar un nuevo método llamado addStudent que devuelve objeto en tipo de mutación de schema.graphql.

Aprendamos cómo acceder a los detalles de la universidad a través de los detalles de los estudiantes. Agregue el tipo de universidad en el archivo de esquema.

type Mutation {
   addStudent_returns_object(collegeId:ID,firstName:String,lastName:String):Student

   createStudent(collegeId:ID,firstName:String,lastName:String):String
}

type College {
   id:ID!
   name:String
   location:String
   rating:Float
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   college:College
}

Paso 2: actualice el archivo resolvers.js

Actualizar un archivo resolvers.js en la carpeta del proyecto y agregue el siguiente código:

const Mutation = {
   createStudent:(root,args,context,info) => {

      return db.students.create({
         collegeId:args.collegeId,
         firstName:args.firstName,
         lastName:args.lastName
      })
   },
   
   // new resolver function
   addStudent_returns_object:(root,args,context,info) => {
      const id = db.students.create({
         collegeId:args.collegeId,
         firstName:args.firstName,
         lastName:args.lastName
      })

      return db.students.get(id)
   }
}

//for each single student object returned,resolver is invoked
const Student = {
   college:(root) => {
      return db.colleges.get(root.collegeId);
   }
}

module.exports = {Query,Student,Mutation}

Paso 3: inicie el servidor y escriba la consulta de solicitud en GraphiQL

A continuación, iniciaremos el servidor y solicitaremos la consulta en GraphiQL con el siguiente código:

mutation {
   addStudent_returns_object(collegeId:"col-101",firstName:"Susan",lastName:"George") {
      id
      firstName
      college{
         id
         name
      }
   }
}

La consulta anterior agrega un nuevo estudiante y recupera el objeto del estudiante junto con el objeto de la universidad. Esto ahorra viajes de ida y vuelta al servidor.

La respuesta es la siguiente:

{
   "data": {
      "addStudent_returns_object": {
         "id": "rklUl08IX",
         "firstName": "Susan",
         "college": {
            "id": "col-101",
            "name": "AMU"
         }
      }
   }
}

↰ Previous page Next page ↱