shopify appのGraphQLの型をつける
created: 2024-08-07
Remix使っているShopifyアプリを作っています
GraphQLのクエリを投げて返ってきた結果に型をつけたかったので調べてみました
Typing GraphQL operations が公式ドキュメントにあります
これを読みつつ設定しました
npm add --save-dev @shopify/api-codegen-preset
npm add @shopify/admin-api-client @shopify/storefront-api-clientは、package-lock.json を見るとあったので追加していません
.graphqlrc.ts も package.json の script も scaffold で作られていました
GraphQL APIでデータを取る処理を書いて
const ORDERS_QUERY = `#graphql
query orders($first: Int!) {
orders(first: $first) {
nodes {
id
name
}
}
}`;
export async function loader({ request }: LoaderFunctionArgs) {
const { admin } = await authenticate.admin(request);
const response = await admin.graphql(ORDERS_QUERY, {
variables: { first: 10 },
});
const res = await response.json();
return json(res);
}#graphql とコメントがないと型が作られないので注意です
これは、@shopify/api-codegen-preset のREADMEに書いてありました
コマンドを実行して、型を作ります
npm run graphql-codegenちなみに
graphql-codegen --watchにすると変更あったら自動で型を作ってくれます
実行したら、
const data = useLoaderData<typeof loader>();の data に型が付いていました
いちばんやさしいShopifyの教本 人気講師が教える売れるネットショップ制作・運営 「いちばんやさしい教本」シリーズ
このリンクは、アフィリエイトリンクです
Amazonのアソシエイトとして、blog.freks.jp は適格販売により収入を得ています。
This site is managed by freks