みかづきブログ・カスタム

基本的にはちょちょいのほいです。

js-buy-sdk(shopify-buy)を使ってShopifyのCheckoutを作成するとエラーが発生する 😱


ことの発端

github.com

README の記載に従って、

import Client from 'shopify-buy';

// Initializing a client to return content in the store's primary language
const client = Client.buildClient({
  domain: 'your-shop-name.myshopify.com',
  storefrontAccessToken: 'your-storefront-access-token'
});

// Create an empty checkout
client.checkout.create().then((checkout) => {
  // Do something with the checkout
  console.log(checkout);
});

という感じで、checkoutを作成したところ、

Error: [{"message":"Field 'presentmentPrices' doesn't exist on type 'ProductVariant'","locations":[{"line":1,"column":94}],"path":["fragment VariantFragment","presentmentPrices"],"extensions":{"code":"undefinedField","typeName":"ProductVariant","fieldName":"presentmentPrices"}},{"message":"Field 'description' doesn't exist on type 'ScriptDiscountApplication'","locations":[{"line":1,"column":904}],"path":["fragment DiscountApplicationFragment","... on ScriptDiscountApplication","description"],"extensions":{"code":"undefinedField","typeName":"ScriptDiscountApplication","fieldName":"description"}}]

と、エラーが発生したので原因を調査しました。

原因

原因は非常に単純で、js-buy-sdk(shopify-buy)のバージョンが古いことが原因でした。
昔つくったプロジェクトだったため、js-buy-sdkのバージョンが、2.12.0のままでした。

github.com

2.12.0 だと、内部でStorefront API (2021-07)を使っているため、もはやサポート外です。

2.20.0 以降で、Storefront APIのバージョンが2023-07(執筆時最新)になるので、それ以降を使うのが安心安全です。

github.com

特に理由がなければ、執筆時最新の 2.20.1 を使っておけば問題ないと思われます。

github.com

補足

2.12.0 → 2.20.1 にバージョンアップしたところ、価格の取得の仕方が変更になっていました。

2.12.0

item.variant.price

2.20.1

item.variant.price.amount

いつ変更が入ったのか、ざっと履歴を追ってみたのですが、 この辺り で priceV2 が追加されているので、この辺りから仕様変更が始まってそうですね。だいぶ昔ですが。

github.com