GraphQL - Мутация

В этой главе мы изучим запросы на мутацию в GraphQL.

Запросы на мутацию изменяют данные в хранилище данных и возвращают значение. Его можно использовать для вставки, обновления или удаления данных. Мутации определены как часть схемы.

Синтаксис запроса на мутацию приведен ниже -

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

Иллюстрация

Давайте разберемся, как добавить новую запись студента в хранилище данных с помощью запроса на мутацию.

Шаг 1 - Загрузите и установите необходимые зависимости для проекта

Создайте папку проекта с именем mutation-app. Измените свой каталог на приложение mutation из терминала. Выполните шаги с 3 по 5, описанные в главе «Настройка среды».

Шаг 2 - Создайте файл schema.graphql

Добавить schema.graphql файл в папке проекта mutation-app и добавьте следующий код -

type Query {
   greeting:String
}

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

Обратите внимание, что функция createStudent возвращает тип String. Это уникальный идентификатор (ID), который создается после создания студента.

Шаг 3 - Создайте файл resolver.js

Создайте файл resolvers.js в папке проекта и добавьте следующий код -

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}

Функция мутации указывает на коллекцию студентов в хранилище данных. Чтобы добавить нового студента , вызовите метод create в коллекции студентов. Объект args будет содержать параметры, которые передаются в запросе. Метод create коллекции студентов вернет идентификатор вновь созданного объекта student.

Шаг 4 - Запустите приложение

Создать server.jsфайл. См. Шаг 8 в главе «Настройка среды». Выполните в терминале команду npm start. Сервер будет работать на 9000 порте. Здесь мы используем GraphiQL в качестве клиента для тестирования приложения.

Следующим шагом является открытие браузера и ввод URL-адреса. http://localhost:9000/graphiql. Введите в редакторе следующий запрос -

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

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

Вышеупомянутый запрос создаст объект student в файле student.json. Запрос вернет уникальный идентификатор. Ответ на запрос показан ниже -

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

Чтобы проверить, создан ли объект ученика, мы можем использовать запрос studentById. Вы также можете открыть файл student.json из папки данных, чтобы проверить идентификатор.

Чтобы использовать запрос studentById, отредактируйте schema.graphql как указано ниже -

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

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

Отредактируйте resolver.js файл, как указано ниже -

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}

Ниже приведен запрос на получение студента по уникальному идентификатору, возвращенному из запроса мутации -

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

Ответ от сервера следующий -

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

Возврат объекта в мутации

Лучше всего вернуть объект в состоянии мутации. Например, клиентское приложение хочет получить сведения о студентах и колледжах. В этом случае, вместо того, чтобы делать два разных запроса, мы можем создать запрос, который возвращает объект, содержащий информацию о студентах и их колледжах.

Шаг 1 - Редактировать файл схемы

Добавьте новый метод с именем addStudent который возвращает объект в типе мутации schema.graphql.

Давайте узнаем, как получить доступ к информации о колледже через данные о студентах. Добавьте тип колледжа в файл схемы.

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
}

Шаг 2. Обновите файл resolvers.js

Обновить файл resolvers.js в папке проекта и добавьте следующий код -

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}

Шаг 3 - Запустите сервер и введите запрос запроса в GraphiQL

Затем мы запустим сервер и запросим запрос в GraphiQL со следующим кодом -

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

Вышеупомянутый запрос добавляет нового студента и извлекает объект student вместе с объектом College. Это экономит круговые обращения к серверу.

Ответ такой, как указано ниже -

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