現在、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自体最近になって学習しているので、私の間違えや理解不足があるかもしれません。
何が違うのか、どうしたらチュートリアルを最後まで動かすことができるのか、お分かりの方いらっしゃいましたら是非ともご教示いただけたら幸いです。
よろしくお願いいたします。
rinaflora
Jul 28, 2022
