【新サービス】マネージドGraphQLサービス「AWS AppSync」のプレビュー版を使ってみた #reinvent
AWS AppSyncを触ってみました
AWS re:Invent 2017で発表された、モバイルアプリのための期待のマネージドGraphQLサービス「AWS AppSync」。現在はパブリックプレビューとして提供されており、事前登録制となっています（2017年12月15日現在）。
- AWS AppSync – GraphQL を基盤として、データに基づいたアプリケーションをオフライン機能でリアルタイムに構築する
- AWS AppSyncの紹介 – リアルタイムおよびオフライン機能を備えたデータ駆動型アプリケーションの構築 | Amazon Web Services ブログ
プレビューが通過したので早速触ってみました。
APIを作成する
まず、マネジメントコンソールのサービス一覧から「AWS AppSync」を探します。モバイルサービスのカテゴリにあります。キーワード検索するとすぐ見つけられます。
「Create API」を選びます。
API nameは「ExampleAPI」、Select a template or custom schemaは「Sample schema」を設定します。Sample schemaでは、AppSyncのAPIに加えて、データソースとなるDynamoDB、および必要となるIAM Roleが自動生成されます。
また、Sample schemaでは下記のようなスキーマが定義されます。
type Comment {
# The id of the comment's parent event.
eventId: ID!
# A unique identifier for the comment.
commentId: String!
# The comment's content.
content: String!
# The comment timestamp. This field is indexed to enable sorted pagination.
createdAt: String!
}
type CommentConnection {
items: [Comment]
nextToken: String
}
type Event {
id: ID!
name: String
where: String
when: String
description: String
# Paginate through all comments belonging to an individual post.
comments(limit: Int, nextToken: String): CommentConnection
}
type EventConnection {
items: [Event]
nextToken: String
}
type Mutation {
# Create a single event.
createEvent(
name: String!,
when: String!,
where: String!,
description: String!
): Event
# Delete a single event by id.
deleteEvent(id: ID!): Event
# Comment on an event.
commentOnEvent(eventId: ID!, content: String!, createdAt: String!): Comment
}
type Query {
# Get a single event by id.
getEvent(id: ID!): Event
# Paginate through events.
listEvents(limit: Int, nextToken: String): EventConnection
}
type Subscription {
subscribeToEventComments(eventId: String!): Comment
@aws_subscribe(mutations: ["commentOnEvent"])
}
schema {
query: Query
mutation: Mutation
subscription: Subscription
}
作成が終わると、APIにアクセスするためのいくつかの情報が閲覧できます。
サンプルアプリを動かしてみる
今回はJavaScript（React）のサンプルアプリから試してみたいと思います。手順はAPI詳細画面の一番下に記載されています。
ここから、予め AppSync.js をダウンロードしておきます。
次に、サンプルアプリのプロジェクトをダウンロードします。なお、サンプルアプリはGitHubで公開されています。
なお、こちらからも参照できます。
次のコマンドでcloneします。
$ git clone git@github.com:aws-samples/aws-mobile-appsync-events-starter-react.git
次に、先ほどダウンロードしておいた AppSync.js を src ディレクトリの直下に置き、ライブラリをインストールします。
$ yarn
次に、サンプルアプリを実行します。
$ yarn start
下図のような画面が表示されます。
データを格納する
サンプルアプリは「イベント情報を共有するサービス」として作られています。イベントを作成したり、作成済みのイベントにコメントを投稿できたりします。
アプリ起動画面はイベント一覧です。やけに大きめな「Create new Event」ボタンを押します。
Name、When、Where、Descriptionを入力します。
作成できました！
イベントの詳細画面から、コメントを投稿することもできます！
格納されたデータをクエリで確認する
アプリで登録したデータが格納されているか、クエリを実行して確認します。マネジメントコンソールにはGraphQLのクエリのエディタが提供されており、こちらから実行もできます。
次のようなクエリを書きました。
query {
listEvents(limit: 100) {
items {
id
name
when
where
description
}
}
}
「Docs」を押すと、スキーマを元に生成されたAPIドキュメントを閲覧できます。非常に分かりやすいですね。
先ほどアプリから登録したイベントが検索できました！
DynamoDBにも格納されています。
GraphQLに詳しくなくても始められる！
「AppSyncを使うためには、まずはGraphQLを覚えないと」という先入観がありましたが、マネジメントコンソールも非常に分かりやすく作られているため「試しながら覚えられる！」という印象を受けました。今後もドキュメントを読みながら色々触れてみたいと思います。
参考
本記事の執筆にあたり、下記の公式情報を参考にしました。本記事とあわせてお読みいただくと、より理解できると思います。
![[Apollo Client v3] fetchMore を使ったページネーションの実装例](https://devio2023-media.developers.io/wp-content/uploads/2019/02/eyecatch-apollo.png)
