Учебники

GraphQL — мутация

Январь 27, 2019

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

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

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

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

иллюстрация

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

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

Создайте папку проекта с именем mutation-app. Измените свой каталог на mutation-app из терминала. Выполните шаги с 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 из коллекции студентов возвращает идентификатор вновь созданного студенческого объекта.

Шаг 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.json. Запрос вернет уникальный идентификатор. Ответ на запрос, как показано ниже — 

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

Чтобы проверить, создан ли объект Student, мы можем использовать запрос studentById. Вы также можете открыть файл Students.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
      }
   }
}

Приведенный выше запрос добавляет нового студента и получает объект студента вместе с объектом колледжа. Это экономит поездки на сервер.

Ответ как указано ниже —

68
Share: