Qiita」を参考にさせて頂きました。Amplifyのコマンドでコードを自動生する際にTypeScriptを選択できるようなので、どんな感じなのか試してみました。ついでに、ReactのHooksも使ってます。バージョン使用した環境は以下のとおりです。--version1.7.0自分の環境にはamplifyのコマンドすら入っていない状態だったので、公式のページを見てインストールしました。initで初期化設定をしていきます。profileの指定等は適宜変更して下さい。defaultGraphQLのAPIを追加します。Post以下のスキーマのサンプルが出来るので、そのまま使います。Float}次に、デプロイとクライアントのコードの自動生成をします。src/API.tsここまで終わると、GraplQLのAPIがAWSにデプロイされ、ローカルのディレクトリは以下のような構成になりました。yarn.lockamplifyのパッケージ追加yarnでパッケージを登録します。TypeScriptの型も一緒にに登録されるようです。aws-amplify-reactアプリケーションの更新create-react-appで自動生成されたコードを変更していきます。Amplifyの初期化部分です。https://bit.ly/CRA-PWAserviceWorker.unregister();次に、アプリ本体です。ポイントは後ほど解説します。流れを掴む事が目的のため、エラー処理は入れてません。App;あとは、起動するだけです。start複数画面開くと、同時にリアルタイムで更新されます。解説と感想モデルgraphqlのスキーマに対応した型がsrc/API.tsに自動生成されているので、基本的にここに定義されている型を使います。null,};Postの中身のみの型が無かったので、以下のように独自に定義しています。null;};GraphQLのスキーマそのままなので、自動生成されて欲しい気もします。追加ボタンを押したときに呼ばれるメソッドです。};GraphQLの代表的なクエリが自動生成されているので、graphqlOperationに指定することで、クエリの種類を切り替えられます。ここでは新規登録なので、createPostを使います。CreatePostInput!に対応する型も自動生成されているので、これに登録したいデータを設定してクエリを送信するだけです。登録されたデータの一覧取得と追加されたデータの監視は、カスタムフックを作って実現しています。useEffectでコンポーネントのマウント時に、Postの一覧取得、Post作成の購読を追加を順番に行い、useStateで作成したPost一覧を戻り値として返す事で、Post一覧の更新を伝えます。posts;};型の整合性を取るため、少しややこしいです。Observable<object>となっています。引数のgraphqlOperationの内容によって戻り値の型が変わります。戻り値のデータ型がobjectで、ジェネリックで型の指定も出来ないので、所々ifで型を絞り込んだり、asでキャストしてます。うまい使い方があるのかもしれませんが、もう少し使いやすくならないかなーと思いました。さいごに最初は全体のイメージが掴みづらかったのですが、実際に使ってみると思ったよりも簡単にGraphQLのAPIが作れました。DynamoDB以外にもRDBやLambdaとも連携できるようなので、色々と応用も出来て便利そうです。upLoginユーザーは見つかりませんでした。