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

AmplifyのAPIをTypeScriptで型安全に開発したい、ただ現状良いTSサポートがなされてるとは言い難い感じになっており、型アサーションをしてあげる必要があります。

※本記事ではReactのコード例を記載しますが、他のUIライブラリにも適用できるかと思います。

下記のようなschema.graphqlが定義されているとします。

type Todo @model {
  id: ID!
  text: String
}

型をつける前

function Todo() {
  useEffect(() => {
    fetchTodos = async () => {
      try {
        const todos = await API.graphql(
          graphqlOperation(getTodo, {
            id: todoId,
          })
        );
      } catch (err) {
        //
      }
    };
  }, []);
}

型をつけていく

amplifyはschema.graphqlの型変更をするとamplify pushまたはamplify codegenでTypeScriptの型もAPI.tsに吐き出してくれます。また、共通のResponse型としてはGraphQLResultというジェネリクスのインターフェースを利用します。

import { GetTodoQuery, GetTodoVariables } from './API' // API.tsへのパス
import { graphqlOperation, GraphQLResult } from '@aws-amplify/api-graphql'

function Todo() {
  useEffect(() => {
    fetchTodos = async () => {
      try {
        const todos = (
          await API.graphql(graphqlOperation(getTodo, {
            id: todoId
          } as GetTodoVariables)
        )) as  GraphQLResult<GetTodoQuery>
      } catch(err) {
        //    
      }
    }
  }, [])
}

少し面倒ですが、これが今の所最も良い対処法かなと思います。
もし他に良い方法があればコメント等いただければ幸いです。