前回 作成したサンプルの Subscription対応について解説しようと思ったのですが、そうこうしているうちに “Approved: AWS AppSync Preview” というメールが来て AWS AppSync を試すことが出来たので、今回は 前回のサンプルを AppSync で動くように修正してみます。
なお、Subscription対応の差分は こちらのコミット に入っていますので、興味のある方は参考にしてください。こちらの アニメーションGIF のように データを更新すると WebSocket を用いて通知され、表示が更新されることが分かります。
* 以下はあくまで、現時点の AWS AppSync プレビュー版を使用した際の手順を示していますので、GA（一般利用可能）になるまでに大きな変更が加わる可能性が高い旨、ご注意ください。
マネジメント・コンソールで「AWS AppSync」をクリックし、以下の画面で「Create API」ボタンをクリックして API新規作成画面へ遷ります。
「Create new API」画面の「Select a template or custom schema」で「Sample schema」を選ぶと GraphQLスキーマやバックエンドの DynamoDBテーブルまで全自動で作ってくれます。初めて AWS AppSync に触れる際には、このサンプルで動作を確認しておくのが良いでしょう。
クライアント・アプリのソースが
https://github.com/aws-samples/aws-mobile-appsync-events-starter-react
にあります。これは
こんな感じの いわゆる ToDo サンプルになっています。
ひと通り動かして満足したら「Custom schema」作成にチャレンジします。
APIのエンドポイントと APIキーが作成されます。
スクロールして、末尾にある「Web」のタブをクリックします。
「2. Download the AWS AppSync.js config file: 」の「Download」ボタンをクリックします。
ダウンロードした「AppSync.js」の内容は以下のようになっており、さきほど作成した APIのエンドポイント、リージョン、APIキーといった設定が入っています。
export default {
"graphqlEndpoint": "https://hogehoge.appsync-api.us-west-2.amazonaws.com/graphql",
"region": "us-west-2",
"authenticationType": "API_KEY",
"apiKey": "da1-Zz1_hogehoge"
}
このファイルを
の src/AppSync.js と置き換えてください。
これでクライアント・アプリの設定は完了ですが、GraphQLスキーマを作らなければなりません。
左側に並んでいるメニューから「Schema」を選んで スキーマ作成画面へ遷ります。
ここに GraphQLスキーマ定義文を書いていくのですが、なんと GRAPHCOOL や GraphCMS と同じように書いてもエラーが出ます。
前回の例 では
type Article @model {
createdAt: DateTime!
id: ID! @isUnique
title: String!
updatedAt: DateTime!
}
と、モデルを定義するだけでしたが、現状の AppSync Preview は @model も @isUnique も DateTime もエラーが出ます。DynamoDBには DateTime型なんて存在しないからですかね。。
前述の全自動サンプルの中を見てみたりして、一例ですが、現状では以下のような定義が必要であることが分かりました。
type Article {
id: ID!
title: String!
}
type ArticleConnection {
items: [Article]
nextToken: String
}
type Query {
getArticle(id: ID!): Article
listArticles(limit: Int, nextToken: String): ArticleConnection
}
これを入力し、右下の「Save」をクリックすると、右上の「Create Resources」をクリックできるようになります。
「Create Resources」をクリックすると、GraphQLスキーマのデータソースになる DynamoDB テーブルを作成することが出来ます。
なお、データソースの指定は左側メニューの「Data Sources」から行うことも出来ます。新規にテーブルを作るのではなく、既存の DynamoDBテーブルを使用したい場合は こちらでデータソースを作成することになります。また、 DynamoDB の他に Elasticsearch や AWS Lambda Function と GraphQL API を繋ぐように指定することも出来ます。
「Create Resources」を使用してデータソースの DynamoDBテーブルを作成すると、GraphQLスキーマと DynamoDBテーブルの繋ぎ方を指定する「Resolver」の設定も行ってくれます。
今回、自分で定義した listArticles(limit: Int, nextToken: String): ArticleConnection には Resolver が自動設定されなかったので「Attach」をクリックして Resolver を定義します。
データソースを選ぶと、事前定義のマッピングテンプレートが用意されているので、その中から選べば設定できます。pagination の単位などは好きなようにカスタマイズできるということですね。
Resolver を設定したら、左側メニューの「Queries」から クエリを入力して動作確認を行います。ここで動かないならクライアント・アプリにおいても動かせないでしょう。
最後に kintone アプリから 上記のクエリを実行してみます。
ソースコードは
にありますので、GRAPHCOOL 版 との違いを確認してみてください。
既定の設定では
のように Local Storage にデータをキャッシュするようで、DynamoDBのデータを書き換えた後 kintoneをリロードしても書き換え後のデータが取得されません。（Local Storage の内容をクリアしてリロードすれば取得できます）
これは
のように
options: {
fetchPolicy: 'cache-and-network',
},
といったオプション（第2引数）を import { graphql } from “react-apollo”; に渡して制御するようです。
いかがだったでしょうか。
Apollo をベースに構築されていても、現時点では他の GraphQL実装と互換性が無かったり、DynamoDBの型の制限に影響を受けているなど、まだ 粗削りではありますが、簡単に GraphQL APIを作成することができそうです。
REST API とGraphQL API 、それぞれの良さを把握して適材適所で使っていければと思います。
