GraphQL-ミューテーション
この章では、GraphQLでのミューテーションクエリについて学習します。
ミューテーションクエリは、データストア内のデータを変更し、値を返します。データの挿入、更新、または削除に使用できます。突然変異はスキーマの一部として定義されます。
ミューテーションクエリの構文を以下に示します-
mutation{
someEditOperation(dataField:"valueOfField"):returnType
}
図
ミューテーションクエリを使用して、新しい学生レコードをデータストアに追加する方法を理解しましょう。
ステップ1-プロジェクトに必要な依存関係をダウンロードしてインストールする
mutation-appという名前でプロジェクトフォルダーを作成します。ターミナルからディレクトリをmutation-appに変更します。環境設定の章で説明されている手順3〜5に従います。
ステップ2-schema.graphqlファイルを作成する
追加 schema.graphql プロジェクトフォルダmutation-appにファイルし、次のコードを追加します-
type Query {
greeting:String
}
type Mutation {
createStudent(collegeId:ID,firstName:String,lastName:String):String
}
関数createStudentは文字列型を返すことに注意してください。これは、学生の作成後に生成される一意の識別子(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コレクションでcreateメソッドを呼び出します。引数のオブジェクトがクエリに渡されるパラメータが含まれています。学生コレクションのcreateメソッドは、新しく作成された学生オブジェクトのIDを返します。
ステップ4-アプリケーションを実行する
作成する server.jsファイル。環境設定の章のステップ8を参照してください。ターミナルでコマンドnpmstartを実行します。サーバーは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ファイルにstudentオブジェクトを作成します。クエリは一意の識別子を返します。クエリの応答は次のとおりです-
{
"data": {
"createStudent": "SkQtxYBUm"
}
}
Studentオブジェクトが作成されているかどうかを確認するには、studentByIdクエリを使用できます。データフォルダーから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"
}
}
}
ミューテーションでオブジェクトを返す
オブジェクトを変更して返すことをお勧めします。たとえば、クライアントアプリケーションは、学生と大学の詳細を取得したいと考えています。この場合、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"
}
}
}
}