AWS Amplify GraphQLの操作 - TypeScriptとHooksを使ったPart 3 [Mutations]
Mat Warger のプロフィール画像
投稿日：2019年7月29日 • 更新日：2019年8月1日
ミューテーションについてさっと見ていきましょう。この記事は短いです。Amplifyはミューテーションを割と簡単にしてくれるし、GraphQLミューテーションの形式も、これまで見てきたクエリにかなり似ています（これまでのシリーズの投稿で詳しく説明しています）。
Mutations
ミューテーションの準備をするために、前セクションで見たクエリの一部を見ていきましょう。
const fetchQuery = async (query: string, variables?: VariablesType) => {
try {
setLoading(true);
const { data } = (await API.graphql(
graphqlOperation(query, variables)
)) as {
data: ResultType;
};
setData(data);
} catch (error) {
console.log(error);
setError(error);
} finally {
setLoading(false);
}
};
Amplifyを使ったGraphQL APIの呼び出しは全て、graphqlOperation関数を使います。これを再利用できるので、データの返却を扱うもう一つの関数を作りましょう。
export const gqlOp = async <
ResultType extends {},
VariablesType extends {} = {}
>(
query: string,
variables?: VariablesType
) => {
const { data } = (await API.graphql(graphqlOperation(query, variables))) as {
data: ResultType;
};
return data;
};
この小さな関数をfetch呼び出しの代わりに使えます。
const fetchQuery = async (query: string, variables?: VariablesType) => {
try {
setLoading(true);
const data = await gqlOp<ResultType, VariablesType>(query, variables)
setData(data);
} catch (error) {
console.log(error);
setError(error);
} finally {
setLoading(false);
}
};
これで準備が整いました。ミューテーションのための関数を作りましょう。
export const mutation = async <
ResultType extends {},
VariablesType extends {} = {}
>(
query: string,
variables?: VariablesType
) => gqlOp<ResultType, VariablesType>(query, variables);
はい、これで終わりです。読んでいただきありがとう！
次回はサブスクリプションに挑戦するので、お楽しみに。
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/mwarger/aws-amplify-graphql-operations-with-typescript-and-hooks-part-3-mutations-1f66
