Liquid、JavaScriptなどに関する質問
現在、Shopifyアプリを開発しようと、公式サイトにあるチュートリアルをやってみました。
ちょうどやりたいことに非常に近いチュートリアルだったので、とてもありがたいと思って実行したのですが、チュートリアル通りの動作をしません。
参考にしているページは
https://shopify.dev/tutorials/create-a-checkout-with-storefront-api
です。
このチュートリアルの一番最初にある
Queriyng for data
というセクションにあるGraphQLのサンプルを利用して、デモで作ったストアに
Shopify GraphiQL APP
を入れて、そのまま記入していますが、response内容がちょっと異なります。
products(first:2) { edges { node { variants(first: 2) { edges { node { id } } } } } } }
を入れています。
デモショップには商品を複数作っています。
チュートリアルサイト側でのresponse例は
{ "data": { "products": { "edges": [ { "node": { "variants": { "edges": [ { "node": { "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8xMzg3MDQ4MzI3NTc5OA==" } }, { "node": { "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8xMzg3MDQ4MzMwODU2Ng==" } } ] } } }, { "node": { "variants": { "edges": [ { "node": { "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8xMzg3MDQ4MzQzOTYzOA==" } }, { "node": { "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8xMzg3MDQ4MzQ3MjQwNg==" } } ] } } } ] } } }
となっていますが、私のデモショップのGraphiQLからのレスポンスは
{ "data": { "products": { "edges": [ { "node": { "variants": { "edges": [ { "node": { "id": "gid://shopify/ProductVariant/123123123123123" } } ] } } }, { "node": { "variants": { "edges": [ { "node": { "id": "gid://shopify/ProductVariant/345345345345345" } } ] } } } ] } }, "extensions": { "cost": { "requestedQueryCost": 12, "actualQueryCost": 10, "throttleStatus": { "maximumAvailable": 1000, "currentlyAvailable": 990, "restoreRate": 50 } } } }
です。
variantsのidの形式が異なるようで、このid形式のまま、チュートリアルの次のGraphQLを実行してもエラーが出ます。
mutation { checkoutCreate(input: { lineItems: [{ variantId: "gid://shopify/ProductVariant/123123123123123", quantity: 1 }] }) { checkout { id webUrl lineItems(first: 5) { edges { node { title quantity } } } } } }
とすると、
{ "errors": [ { "message": "Field 'checkoutCreate' doesn't exist on type 'Mutation'", "locations": [ { "line": 2, "column": 3 } ], "path": [ "mutation", "checkoutCreate" ], "extensions": { "code": "undefinedField", "typeName": "Mutation", "fieldName": "checkoutCreate" } } ] }
となります。
エラーメッセージ的にidが違うからということではなさそうな気もしていますが、該当するチュートリアルを最後まで動かしてみたいと思っています。
GraphQL自体最近になって学習しているので、私の間違えや理解不足があるかもしれません。
何が違うのか、どうしたらチュートリアルを最後まで動かすことができるのか、お分かりの方いらっしゃいましたら是非ともご教示いただけたら幸いです。
よろしくお願いいたします。
こちらは、少し紛らわしいのですが、参考にされているチュートリアルは、Storefront APIと呼ばれるGraphQLであるのに対して、Shopify GraphQL Appが対象としているのは、Admin APIというもので、アクセスするエンドポイントが違う別物です。両者とも共有するObject(Customer、productなど)がありますが、別APIなので、用途やレスポンスが異なります。(ご指摘されているように、idの形式もことなります)Storefront APIを試すには、現状では、開発者サイトにうまこまれているダミーのGraphQL appでフォーマットを確認するぐらいしかありません。
下記のブログとそれを使った動画でこのあたりの解析をしておりますので、一度ご参照いただければと思います。
https://www.shopify.jp/blog/partner-shopify-app-development
https://www.youtube.com/playlist?list=PLkR3LRtxAZfod8TvcsKU7IEWeAO5fhcOe
この辺りのことを説明している部分は以下です。
https://www.youtube.com/watch?v=xgPrMP48W-M&list=PLkR3LRtxAZfod8TvcsKU7IEWeAO5fhcOe&index=4&t=3926s
ご返答ありがとうございます!
なるほど、管理側のShopify GraphQL アプリではStorefront APIが動かないのですね。
Storefront APIを試すには、エンドポイントに直接GraphQLを投げ込んで試すということで理解いたしました。
また、解説の動画URLもありがとうございます。合わせて確認してみます!
ありがとうございました。大変助かりました。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024