AmplifyでTypeScriptの型エラーが出た時の対処法

Amplifyで自動生成されたスキーマを利用して、graphqlでデータの取得を試みたところ以下のエラーが発生しました。

const response = await API.graphql({query: searchPhrases});
const phraseCount = response.data.searchPhrases.total

// エラー Property 'data' does not exist on type 'GraphQLResult | Observable<object>'.
// エラー Property 'data' does not exist on type 'Observable<object>'.

戻り値を格納した変数responseにTypeScriptの型定義がなされていないため怒られたみたいです。

以下のように// @ts-ignore を加えたら一時的にエラーを回避できました。

const response = await API.graphql({query: searchPhrases});
// @ts-ignore
const phraseCount = response.data.searchPhrases.total

※// @ts-ignore とコメント形式で書くことで、次の行の型チェックがスルーされます。

あとがき

// @ts-ignore でエラーは消えますが、型チェックを強制的に無効化するのは応急処置の要素が強いため多用しない方がいいみたいです。

もし、どうしてもという場合はasなどを使用して型キャストするのが望ましく、以下の記事で詳しく書かれています。

TypeScriptの型エラーを踏み潰すときのお作法

今回のエラーを// @ts-ignoreの使用なしで解決したい場合、以下の記事が参考になるかもしれません。私の場合はうまくいかず一旦// @ts-ignore で対応していますが。。

AmplifyのAPIリクエストをTypeScriptでちゃんと型をつける