FROM CACHE - jp_header

チュートリアル通りにしても動作しない

Kazunori
訪問者
2 0 0

現在、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自体最近になって学習しているので、私の間違えや理解不足があるかもしれません。

何が違うのか、どうしたらチュートリアルを最後まで動かすことができるのか、お分かりの方いらっしゃいましたら是非ともご教示いただけたら幸いです。

 

よろしくお願いいたします。

 

2件の返信2

junichiokamura
Community Manager
1200 280 506

こちらは、少し紛らわしいのですが、参考にされているチュートリアルは、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

Senior Partner Solutions Engineer
Kazunori
訪問者
2 0 0

ご返答ありがとうございます!

なるほど、管理側のShopify GraphQL アプリではStorefront APIが動かないのですね。

Storefront APIを試すには、エンドポイントに直接GraphQLを投げ込んで試すということで理解いたしました。
また、解説の動画URLもありがとうございます。合わせて確認してみます!

ありがとうございました。大変助かりました。