BLOG

R3 Cloud Journey

kintone から AWS AppSync [Preview] へのアクセスを試す

2017-12-20

前回 作成したサンプルの 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"
}

このファイルを

r3-yamauchi/kintone-aws-appsync-sample1
_kintone-aws-appsync-sample1 - kintone から AWS AppSync にアクセスする_github.com

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 アプリから 上記のクエリを実行してみます。

ソースコードは

r3-yamauchi/kintone-aws-appsync-sample1
_kintone-aws-appsync-sample1 - kintone から AWS AppSync にアクセスする_github.com

にありますので、GRAPHCOOL 版 との違いを確認してみてください。

既定の設定では

のように Local Storage にデータをキャッシュするようで、DynamoDBのデータを書き換えた後 kintoneをリロードしても書き換え後のデータが取得されません。(Local Storage の内容をクリアしてリロードすれば取得できます)

これは

https://github.com/aws-samples/aws-mobile-appsync-events-starter-react/blob/master/src/Components/AllEvents.js#L72

のように

options: {
fetchPolicy: 'cache-and-network',
},

といったオプション(第2引数)を import { graphql } from “react-apollo”; に渡して制御するようです。

いかがだったでしょうか。

Apollo をベースに構築されていても、現時点では他の GraphQL実装と互換性が無かったり、DynamoDBの型の制限に影響を受けているなど、まだ 粗削りではありますが、簡単に GraphQL APIを作成することができそうです。

REST API とGraphQL API 、それぞれの良さを把握して適材適所で使っていければと思います。

R3の
ご提供サービス
自社のシステム開発・移行などをご依頼したい方
お客様とともに
作りながら考える
新しいシステム開発
kintone導入・アプリ開発・カスタマイズにお困りの方
kintoneをもっと
使いやすくする
gusukuシリーズ

アールスリーインスティテュートで、これまでになかった画期的な kintoneカスタマイズサービス gusuku Customine(カスタマイン) を開発しています。 kintone認定アプリデザイン/カスタマイズ スペシャリスト