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://: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"
         }
      }
   }
}
列印頁面
上一頁
下一頁
廣告