GraphQL - Mutation

在本章中，无涯教程将学习GraphQL中的Mutation查询。

Mutation查询会修改数据存储区中的数据并返回一个值。它可以用于插入，更新或删除数据。

下面是Mutation查询的语法-

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

让无涯教程了解如何使用Mutation查询将新的学生记录添加到数据存储中。

步骤1  -  下载并安装依赖项

通过名称mutation-app创建一个项目文件夹。从终端将目录更改为mutation-app。请按照"环境设置"一章中介绍的步骤3至5进行操作。

步骤2  -  创建Schema文件

在项目文件夹mutation-app中添加 schema.graphql 文件，并添加以下代码-

type Query {
   greeting:String
}

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

请注意，函数createStudent返回String类型。这是创建学生后生成的唯一标识符(ID)。

链接：https://www.learnfk.comhttps://www.learnfk.com/graphql/graphql-mutation.html

来源：LearnFk无涯教程网

步骤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}

Mutation函数指向数据存储区中的学生集合。要添加新的学生，请在学生集合中调用create方法。 args 对象将包含在查询中传递的参数。 students 集合的create方法将返回新创建的学生对象的ID。

步骤4  -  运行应用程序

创建一个 server.js 文件。请参阅"环境设置"一章中的步骤8。在终端中执行命令npm start。服务器将启动并在9000端口上运行。在这里，使用GraphiQL作为客户端来测试应用程序。

下一步是打开浏览器并输入URL http://localhost:9000/graphiql 。在编辑器中键入以下查询-

无涯教程网

//collegeId 应与来自colleges.json 的数据相匹配，以便于检查询

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}

下面给出的是通过Mutation查询返回的唯一ID获取学生的查询-

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

来自服务器的响应如下-

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

返回Mutation

客户端应用程序想要获取学生和大学的详细信息。可以创建一个返回包含学生及其大学详细信息的对象的查询，而不是发送两个不同的请求。

步骤1  -  编辑Schema文件

添加一个名为 addStudent 的新方法，该方法以 schema.graphql 的Mutation类型返回对象 。

让无涯教程学习如何通过学生详细信息访问大学详细信息。在模式文件中添加大学类型。

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
      })
   },
   
   //新的解析器函数
   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)
   }
}

//对于返回的每个学生对象，都会调用解析器
const Student={
   college:(root) => {
      return db.colleges.get(root.collegeId);
   }
}

module.exports={Query,Student,Mutation}

步骤3  -  启动服务器并请求查询

接下来，无涯教程将使用以下代码启动服务器并在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"
         }
      }
   }
}