【新サービス】マネージドGraphQLサービス「AWS AppSync」のプレビュー版を使ってみた #reinvent

AWS AppSyncを触ってみました

AWS re:Invent 2017で発表された、モバイルアプリのための期待のマネージドGraphQLサービス「AWS AppSync」。現在はパブリックプレビューとして提供されており、事前登録制となっています(2017年12月15日現在)。

プレビューが通過したので早速触ってみました。

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.jssrc ディレクトリの直下に置き、ライブラリをインストールします。

$ 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を覚えないと」という先入観がありましたが、マネジメントコンソールも非常に分かりやすく作られているため「試しながら覚えられる!」という印象を受けました。今後もドキュメントを読みながら色々触れてみたいと思います。

参考

本記事の執筆にあたり、下記の公式情報を参考にしました。本記事とあわせてお読みいただくと、より理解できると思います。