AmplifyのAPIリクエストをTypeScriptでちゃんと型をつける
6677 ワード
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) {
//
}
}
}, [])
}
少し面倒ですが、これが今の所最も良い対処法かなと思います。
もし他に良い方法があればコメント等いただければ幸いです。
Author And Source
この問題について(AmplifyのAPIリクエストをTypeScriptでちゃんと型をつける), 我々は、より多くの情報をここで見つけました https://zenn.dev/ynakamura/articles/210460b470f7b973e5cc著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol