Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away