GraphQL Mutation
在本章中,我们将学习 GraphQL 中的变异查询。
变异查询修改数据存储中的数据并返回一个值。它可用于插入、更新或删除数据。突变被定义为架构的一部分。
突变查询的语法如下-
mutation{
someEditOperation(dataField:"valueOfField"):returnType
}
插图
让我们了解如何使用变异查询将新学生记录添加到数据存储中。
步骤 1-下载并安装项目所需的依赖项
创建一个名为mutation-app 的项目文件夹。从终端将您的目录更改为mutation-app。按照"环境设置"一章中说明的步骤 3 到 5 进行操作。
第 2 步-创建 schema.graphql 文件
在项目文件夹mutation-app中添加
schema.graphql文件并添加以下代码-
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}
变异函数指向数据存储中的学生集合。要添加一个新的
student,请调用students 集合中的create 方法。
args 对象将包含在查询中传递的参数。
students 集合的 create 方法将返回新创建的学生对象的 id。
第 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 文件中创建一个 student 对象。查询将返回一个唯一标识符。查询的响应如下所示-
{
"data": {
"createStudent": "SkQtxYBUm"
}
}
要验证学生对象是否已创建,我们可以使用 studentById 查询。您还可以从数据文件夹中打开 students.json 文件来验证 ID。
要使用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}
下面给出的是通过从变异查询返回的唯一 id 来获取学生的查询-
{
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
}
}
}
上述查询添加了一个新学生并检索学生对象和大学对象。这节省了到服务器的往返行程。
响应如下-
{
"data": {
"addStudent_returns_object": {
"id": "rklUl08IX",
"firstName": "Susan",
"college": {
"id": "col-101",
"name": "AMU"
}
}
}
}