GraphQL - Mutação

Neste capítulo, aprenderemos as consultas de mutação em GraphQL.

As consultas de mutação modificam os dados no armazenamento de dados e retornam um valor. Ele pode ser usado para inserir, atualizar ou excluir dados. As mutações são definidas como parte do esquema.

A sintaxe de uma consulta de mutação é fornecida abaixo -

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

Ilustração

Vamos entender como adicionar um novo registro de aluno ao armazenamento de dados usando uma consulta de mutação.

Etapa 1 - Baixe e instale as dependências necessárias para o projeto

Crie uma pasta de projeto com o nome mutation-app. Mude seu diretório para mutation-app no terminal. Siga as etapas 3 a 5 explicadas no capítulo Configuração do ambiente.

Etapa 2 - Criar um arquivo schema.graphql

Adicionar schema.graphql arquivo na pasta do projeto mutation-app e adicione o seguinte código -

type Query {
   greeting:String
}

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

Observe que a função createStudent retorna um tipo String. Este é um identificador único (ID) gerado após a criação de um aluno.

Etapa 3 - Criar um arquivo resolver.js

Crie um arquivo resolvers.js na pasta do projeto e adicione o seguinte 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}

A função de mutação aponta para a coleção dos alunos no armazenamento de dados. Para adicionar um novo aluno , invoque o método de criação na coleção de alunos. O objeto args conterá os parâmetros que são passados na consulta. O método de criação da coleção de alunos retornará o id de um objeto de aluno recém-criado.

Etapa 4 - Executar o aplicativo

Criar uma server.jsArquivo. Consulte a etapa 8 no capítulo Configuração do ambiente. Execute o comando npm start no terminal. O servidor estará instalado e funcionando na porta 9000. Aqui, usamos GraphiQL como um cliente para testar o aplicativo.

O próximo passo é abrir o navegador e digitar o URL http://localhost:9000/graphiql. Digite a seguinte consulta no editor -

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

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

A consulta acima criará um objeto de aluno no arquivo student.json. A consulta retornará um identificador exclusivo. A resposta da consulta é mostrada abaixo -

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

Para verificar se o objeto aluno foi criado, podemos usar a consulta studentById. Você também pode abrir o arquivo students.json da pasta de dados para verificar a id.

Para usar a consulta studentById, edite o schema.graphql como dado abaixo -

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

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

Edite o resolver.js arquivo conforme fornecido abaixo -

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 seguir está a consulta para obter o aluno por id único retornado da consulta de mutação -

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

A resposta do servidor é a seguinte -

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

Retornando um objeto em mutação

É uma prática recomendada retornar um objeto em mutação. Por exemplo, o aplicativo cliente deseja obter detalhes de alunos e faculdades. Nesse caso, em vez de fazer duas solicitações diferentes, podemos criar uma consulta que retorna um objeto contendo alunos e seus detalhes de faculdade.

Etapa 1 - Editar Arquivo de Esquema

Adicione um novo método chamado addStudent que retorna o objeto em tipo de mutação de schema.graphql.

Vamos aprender como acessar os detalhes da faculdade por meio dos dados do aluno. Adicione o tipo de faculdade no arquivo 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
}

Etapa 2 - Atualizar o arquivo resolvers.js

Atualizar um arquivo resolvers.js na pasta do projeto e adicione o seguinte 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}

Etapa 3 - Inicie o servidor e digite a consulta de solicitação no GraphiQL

Em seguida, devemos iniciar o servidor e solicitar a consulta em GraphiQL com o seguinte código -

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

A consulta acima adiciona um novo aluno e recupera o objeto aluno junto com o objeto faculdade. Isso economiza viagens de ida e volta para o servidor.

A resposta é a seguinte -

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

↰ Previous page Next page ↱