LoginSignup
16
13

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-01-22

はじめに

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

16
13
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
13