モチベーション
amplifyの普通の問い合わせでは、全て型の世界に閉じ込めようとすると書き方がだいぶ冗長になる。
apollo-clientのuseQueryを使えば簡潔に書ける上に、ジェネリクスによって型のサポートもあるし、loadingの状態も検知できる。
でもapollo-clientを使う方法は、接続設定の記載自体が必要だし、すべてがamplifyの機能に寄せれなくなる可能性がある。
https://qiita.com/sakapun/items/8084d61156b660a8fde1
公式サポートはまだない
プロポーザルはあったみたい.
https://github.com/aws-amplify/amplify-js/issues/4235
カスタムHooksを使って解決できる
こちらの記事から続く4記事の連載で、書き方が学べる。
一つ一つ丁寧に説明されていて、すごくわかりやすい。感謝。
翻訳はしません。
作者のライブラリは使わずに、アプリ内にコードを配備しよう
npmパッケージにしてくれているが、AWS Amplify周りのライブラリはすぐバージョンアップするので、使えなかった。
https://www.npmjs.com/package/amplify-query-helpers
なので、作者のGithubのコードを自分のアプリ内に配備したほうがいい。
自分はsrc/libs/amplify-query-helper/index.tsxに設置している
https://github.com/mwarger/amplify-query-helpers/blob/develop/src/index.tsx
必要なライブラリは一個だけだった。
npm i --save-dev @types/zen-observable`
注： この型定義は実は最新バージョンだと最終的に必要ないのだが、一度試しに全コピペしてuseQueryを使う分には要る。
というか、dev.toの記事のとおりにuseSubscriptionを使おうとすると動かなくてハマる。
最新バージョンだと、amplify内部でzen-observable-tsを使うようになっているので、ちょっとコードの改造がいるという解説記事を後で書く, todo。
関連投稿：レスポンスの型定義がほしい！
こちらの記事にかいた
https://qiita.com/sakapun/items/247f539da30c14f65c5f