GraphQL-突然変異

この章では、GraphQLで突然変異クエリを学習します。

突然変異クエリは、データストア内のデータを変更し、値を返します。データの挿入、更新、削除に使用できます。突然変異は、スキーマの一部として定義されます。

変異クエリの構文は以下のとおりです-

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

図

突然変異クエリを使用して、新しい学生レコードをデータストアに追加する方法を理解しましょう。

ステップ1-プロジェクトに必要な依存関係をダウンロードしてインストールする

名前mutation-appでプロジェクトフォルダを作成します。ターミナルからディレクトリを「mutation-app」に変更します。環境設定の章で説明されている手順3〜5に従います。

ステップ2-schema.graphql Fileの作成

プロジェクトフォルダ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}

突然変異関数は、データストア内の学生コレクションを指します。新しい_student_を追加するには、studentsコレクションでcreateメソッドを呼び出します。 _args_オブジェクトには、クエリで渡されるパラメーターが含まれます。 _students_コレクションのcreateメソッドは、新しく作成された学生オブジェクトの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 retrieval

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

上記のクエリは、student.jsonファイルに学生オブジェクトを作成します。クエリは一意の識別子を返します。クエリの応答は以下のとおりです-

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

学生オブジェクトが作成されたかどうかを確認するには、studentByIdクエリを使用できます。データフォルダから「students.json」ファイルを開いてIDを確認することもできます。

studentById queryを使用するには、以下に示すように 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"
      }
   }
}

ミューテーションでオブジェクトを返す

突然変異したオブジェクトを返すことをお勧めします。たとえば、クライアントアプリケーションは学生と大学の詳細を取得する必要があります。この場合、2つの異なるリクエストを作成する代わりに、学生とその大学の詳細を含むオブジェクトを返すクエリを作成できます。

ステップ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
}

ステップ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"
         }
      }
   }
}

Graphql-mutation

目次