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 、それぞれの良さを把握して適材適所で使っていければと思います。

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

自社のシステム開発・移行などをご依頼したい方
お客様とともに
作りながら考える
新しいシステム開発
詳しく見る
kintone導入・アプリ開発・カスタマイズにお困りの方
ノーコードでらくらく
kintoneカスタマイズ
詳しく見る
kintoneアプリの
バージョン管理・バックアップ
詳しく見る
kintoneアプリの開発・運用を
強力サポート

詳しく見る
更新情報をメールでお届けします!

kintoneアプリのカスタマイズに役立つ情報や、イベントの情報をメールでお届けいたします。
ご登録をお待ちしております!

R3のご提供サービス
自社のシステム開発・移行などをご依頼したい方
お客様とともに作りながら考える
新しいシステム開発
詳しく見る
kintone導入・アプリ開発・カスタマイズにお困りの方
kintoneをもっと使いやすくする
gusukuシリーズ
詳しく見る
更新情報をメールでお届けします!
kintoneアプリのカスタマイズに役立つ情報や、イベントの情報をメールでお届けいたします。
ご登録をお待ちしております!