GraphQL Mutation 修改数据存储中的数据

在本章中，我们将学习 GraphQL 中的 Mutation 查询。

Mutation 查询修改数据存储中的数据并返回一个值。它可用于插入、更新或删除数据。Mutation 被定义为 Schema 的一部分。

Mutation 查询的语法如下

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

让我们了解如何使用 mutation 查询将新学生记录添加到数据存储中。

一、 下载并安装项目所需的依赖项

创建一个名为app的文件夹。从终端将目录更改为 app。然后，按照开发环境的搭建中说明的步骤 3 到 5 完成下载和安装过程。

二、 创建schema

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

schema.graphql

type Query {
   greeting:String
}

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

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

三、创建解析器

在项目文件夹中创建一个文件resolvers.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 函数指向数据存储中的 students 集合。要添加新学生，请调用 students 集合中的 create 方法。args 对象将包含在查询中传递的参数。students 集合的 create 方法将返回新创建的学生对象的 id。

四、运行应用程序

创建 server.js 文件并参考开发环境的搭建章节中的步骤 8。下一步是在终端中执行命令 npm start。服务器将在 9000 端口上启动并运行。在这里，我们使用 GraphiQL 作为客户端来测试应用程序。打开浏览器并输入 URL，http://localhost:9000/graphiql。

在编辑器中输入以下查询

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

上述查询将在 student.json 文件中创建一个 student 对象。查询将返回一个唯一标识符。查询的响应如下所示

{
  "data": {
    "createStudent": "S1U3bcvzt"
  }
}

为了验证学生对象是否已创建，我们可以使用 studentById 查询。还可以从 data 文件夹中打开 students.json 文件来验证 id。

要使用 studentById 查询，请编辑schema.graphql，如下所示

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:"S1U3bcvzt") {
    id
    firstName
    lastName
  }
}

来自服务器的响应如下

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

在 Mutation 中返回一个对象

最好的做法是返回一个 mutation 的对象。例如，客户端应用程序想要获取学生和大学的详细信息。在这种情况下，我们可以创建一个查询，返回一个包含学生及其大学详细信息的对象，而不是发出两个不同的请求。

一、编辑 schema 文件

添加一个名为addStudent的新方法，它返回schema.graphql 中mutation类型的 对象。

让我们学习如何通过学生详细信息访问大学详细信息。在 schema 文件中添加 Colleage 类型。

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
}

二、更新 resolvers.js 文件

更新 项目文件夹中的文件 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}

三、启动服务器并在 GraphiQL 中键入请求查询

接下来，我们将启动服务器并使用以下代码在 GraphiQL 中请求查询

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

上面的查询添加了一个新学生并检索 students 对象和 colleage 对象。这节省了到服务器的往返行程。

响应如下

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