Vue + Amplify + AppSync で簡単なチャットを作る

前にも似たようなものを作った気がするけど AWS Summit 2019 で感化されたので改めて作ってみた。

 

作り方

vue cli でアプリケーションを作った後、AWS Amplify CLIAPIを組み込み。

データベースは DynamoDB で GraphQL でデータを取得している。

GraphQL へのスキーマは最初 Amplify のCLI で定義して編集は AppSync のコンソールでいじる感じ。

GrapyQLのサブスクリプションを使えばデータベースへの変更を取得できるので、それで変更を反映している。

最後に Vue で見た目整えて終わり。

 

課題

作ってから気づいたけどソート順は保証されないっぽいので Vue側でソートしてやる必要がある? それか GraphQL でできるんだろうか。

 

youtu.be