GraphQL - 变异

上一页
下一页

在本节中，我们将学习 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}

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

步骤 4 - 运行应用程序

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

下一步是打开浏览器并键入 URL https://127.0.0.1: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 文件中创建一个学生对象。查询将返回一个唯一的标识符。查询的响应如下所示：

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

要验证是否创建了学生对象，我们可以使用 studentById 查询。您还可以从 data 文件夹打开 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 - 编辑模式文件

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

让我们学习如何通过学生详细信息访问学院详细信息。在模式文件中添加 college 类型。

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"
         }
      }
   }
}
打印页面
上一页
下一页
广告