开发手册 欢迎您!
软件开发者资料库

GraphQL - Mutation

GraphQL Mutation - 从简单和简单的步骤学习GraphQL,从基本到高级概念,包括简介,环境设置,架构,应用程序组件,示例,类型系统,架构,解析器,查询,变异,验证,JQuery集成,React集成, Apollo客户端,身份验证客户端,缓存。

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

突变功能指向学生收藏在数据存储区中.要添加新的学生,请在学生集合中调用create方法. args 对象将包含在查询中传递的参数. 学生集合的创建方法将返回新创建的学生对象的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 retrievalmutation {   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}

编辑解析器.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"      }   }}

返回变异中的对象

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

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

Step 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 invokedconst Student = {   college:(root) => {      return db.colleges.get(root.collegeId);   }}module.exports = {Query,Student,Mutation}

第3步和第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"         }      }   }}