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"
}
}
}
}