AWS
React
GraphQL
AppSync

AWS AppSyncとReactでToDoアプリを作ってみよう (1)GraphQLスキーマの定義

はじめに

AWS AppSyncでは、APIクエリにGraphQLを利用するため、GraphQLのスキーマ定義が必須です。
今回は、 schema.graphqlというファイルを作成し、ここにGraphQLスキーマを定義していきます。

Todoスキーマの定義

Query

まずは、Todoのtypeを定義します。
それぞれの項目に指定された、IDStringIntはGraphQLで用意されているデフォルトの型です。
また、!は必須項目であることを表します。

type Todo {
  id: ID!
  title: String
  description: String
  completed: Boolean 
}

次にこのtypeに対するqueryを定義します。
Queryという名前のルート型を追加して、Todoオブジェクトを含むリストを返すのgetTodosフィールドを追加します。

type Query {
  getTodos: [Todo]
}

schema に登録します。

schema {
  query:Query
}

ここまでの結果

schema.graphql
schema {
  query:Query
}

type Query {
  getTodos: [Todo]
}

type Todo {
  id: ID!
  title: String
  description: String
  completed: Boolean 
}

Mutation

queryでのデータ取得のクエリ型定義を行ったので、mutationでデータの追加、更新、削除する場合のクエリ型を定義していきます。

まずは、追加・更新の際のmutationを定義します。
addTodoフィールドは引数を取り、結果としてTodoオブジェクトを返すメソッドのようなイメージです。

type Mutation {
  addTodo(id: ID!, title: String, description: String, , completed: Boolean): Todo
}

同様に編集・削除の際のmutationを定義します。

type Mutation {
  addTodo(id: ID!, title: String, description: String, , completed: Boolean): Todo
  updateTodo(id: ID!, title: String, description: String, , completed: Boolean): Todo
  deleteTodo(id: ID!): Todo
}

また、今回は使用しませんでしたが、enum型なども使用できるようです。

ここまでの結果

schema.graphql
schema {
  query: Query
  mutation: Mutation
}

type Query {
  getTodos: [Todo]
}

type Mutation {
  addTodo(id: ID!, title: String, description: String, , completed: Boolean): Todo
  updateTodo(id: ID!, title: String, description: String, , completed: Boolean): Todo
  deleteTodo(id: ID!): Todo
}

type Todo {
  id: ID!
  title: String
  description: String
  completed: Boolean 
}

Subscription

今回の例ではリアルタイム性を求めないため、Subscriptionは利用しません。
また機会があったら、試してみようと思います。

GraphQLスキーマの登録

前の手順で作成したGraphQLスキーマをAppSyncにアップロードします。

まずは、コンソール画面から、「AWS AppSync > 作成したプロジェクト > Schema」を選択し、Schema編集画面を開きます。

スクリーンショット 2018-01-21 19.59.31.png

Schemaの項目に、作成したGraphQLスキーマの内容をコピー&ペーストして、右下の「Save」ボタンをクリックし保存します。
ボタンをクリックすると、内容が検証され、スキーマの内容に構文エラーがあると、エラーメッセージが表示されます。

スクリーンショット 2018-01-21 20.05.13.png

エラーが有った場合には、対象の箇所を修正して再度保存してください。
正常に保存されると、「Data Types」の項目に、schema.graphqlに定義した型の一覧が表示されます。

スクリーンショット 2018-01-21 20.16.49.png

ここまでが、GraphQLスキーマの定義と、AppSyncへの登録の手順です。

参考

Designing Your Schema -AWS AppSync
Introduction to GraphQL -GraphQL