TypeScript,React,Amplify,AppSyncでの掲示板アプリについて

今回はTypeScript編です。参考にした記事はこちら。

qiita.com

Reactアプリのひな型作成

$ create-react-app boardapp_type --typescript  
$ cd boardapp_type  
$ amplify init  

create-react-appで簡単にReactアプリが作成可能。 なおgitリポジトリ(.gitフォルダ)も作成されていました。 一緒に作成されるtsconfig.jsonが存在するディレクトリは、TypeScriptプロジェクトのルートディレクトリを示しており、コンパイルオプションが記載されています。

tsconfig.json · TypeScript

GraphQLを追加

$ amplify add api

AWSにAppSyncのAPIがデプロイされる。

$ amplify push

ここで、AWSコンソールでAppSyncのAPIを確認すると、APIがデプロイされています。 APIのQueriesを使用することで、query,mutaitonのテストを実施。

yarnでパッケージ登録

$ yarn add asws-amplify aws-amplify-react

gitで差分を確認するとpackage.jsonにaws-amplify,aws-amplify-reactが追加されている。 amplify initしただけでは登録されない模様。 あとはyarn.lockも色々更新されている。

アプリケーション更新

こちらは記載されていたソースをコピー。

結果

無事動作しました。リアルタイム更新できることも確認できました。 Amplifyの使用については、少し慣れてきた気がしますが、React、TypeScriptの書き方が全然分かってないので、次はそちらの勉強が必要と感じました。