grandstream blog

【Shopify】StorefrontAPIでmetafieldを取得する方法!

こんにちは、grandstreamです。

今回は、ShopifyのStorefront APIを用いて、metafieldを取得する方法について簡単に解説したいと思います。

なお本記事は以下の公式ドキュメントを参考に作成しています。

https://shopify.dev/tutorials/retrieve-metafields-with-storefront-api

デフォルトではmetafieldを取得できない

どうやら、Storefront API は、初期状態ではmetafieldの情報を取ってこれない仕様になっているようです。

これを取ってこれるようにするには、(ざっくりいうと)GraphQL Admin APIに対して、許可申請のリクエストを送らないといけないみたいです。

以下では、そのリクエストのやり方を説明します。

Storefront APIでmetafieldを取得する手順

  1. Shopify管理画面の「アプリ管理」からプライベートアプリに入り、ADMIN API権限の必要箇所を許可する。
  2. GraphQLアプリからmutationを作成しリクエストする。

一つずつ見ていきます。

1.ADMIN API権限を許可

これが結構忘れがちなんですよね。

Shopify管理画面の「アプリ管理」からプライベートアプリに入ると、「ADMIN API権限」の欄があると思います。

ここで、「商品管理」など、metafieldを設定している箇所を「読み取り及び書き込み」にしましょう。

これで準備はできました。

2.GraphQLアプリからmutationを作成しAdmin APIに送信

次に、GraphQLでAPI通信ができるアプリを使って、「Storefront APIでmetafieldの情報を取ってこれるようにしたいです」というリクエストをAdmin APIに対して行います。

以下に具体的なコードを載せておきます。

なお、今回参考にした公式ドキュメント内にも同じ記述があります。

mutation

ここはそのままコピペでOK。

variables

ここの”namespace”と”key”の部分は、Shopify構築時にmetafieldアプリなどで設定したものを入力してください。

ちなみに僕は「Advanced Custom Fields」というアプリを使っていたので、そのアプリを開いて”namespace”と”key”を確認しました。(下画像)

そして”ownerType”ですが、ここは、そのmetafieldが属している値を入力してください。

そのメタフィールドが商品に設定したものなら、”PRODUCT”と入力します。

なお、”ownerType”にどんな種類があるかは下記URLをご参考ください。

MetafieldOwnerType

JSON response

うまく通信ができれば、このようなレスポンスが返ってくると思います。

ちなみに同じ送信をもう一度やるとエラーが出ちゃうと思いますが、1回送信すればもうOKです。

普通にStorefront APIで該当のmetafieldが取得できるはずです。

あとは、ちょっとめんどくさいですが、metafieldの”namespace”と”key”を変えながら、必要なだけリクエストを繰り返してください。

QraphQLアプリについて

今回のAPIの通信、動作確認を行うにあたって使用したQraphQLアプリのスクリーンショットを載せておきます。

なお、「Shopify Admin API GraphiQL explorer」とか、「Insomnia」でもできると思います。

なお、adminAPIに通信する際には、「HTTP ヘッダーに」下記内容が必要になりますのでお忘れなく。

  • Content-Type  → application/json
  • X-Shopify-Access-Token → Admin APIのパスワード(下画像)

まとめ

Shopifyのドキュメントは英語のものが多いので、英語が苦手な方にはしんどいと思いますが、今回の記事が少しでもお役に立てれば幸いです。

ではまた!

grandstreamに支援を送る