ShopifyのAPIをPostmanで手軽にテストする

おはようございますこんにちはこんばんは。
キューのWebチームで、ディレクターをしている田辺です。

我々Webチームでは、Shopifyのアプリ開発に取り組んでいます。
私は、Shopifyのアプリ開発にディレクターという立場で関わっているのですが、
ふと、「こういう機能は実装できないか？」と思い立つことがあります。

そんなとき、それができるかどうかを、いちいちエンジニアに聞くのが面倒くさい、、、ではなく、彼らの手をその都度、止めてしまっては生産性の向上は望めません。

そこで、自分でShopifyのAPIコールを試せれば、少なくとも一次調査くらいはできるなと思い立ち、Postmanを使ってShopify APIを手軽に試せる環境(というほど大袈裟なものではありませんが)を作ってみたので、本記事ではその紹介をします。

この記事の存在意義を根底から揺るがす「はじめに」

Shopifyには、Shopify Admin API (GraphQL)とストアフロントAPI(GraphQL)を自由にテストできるWebツールやアプリがあります。

Webツール: https://shopify.dev/apps/tools/graphiql-admin-api
Shopifyアプリ: https://shopify-graphiql-app.shopifycloud.com/login

これらのツールやアプリを使った方が、断然楽ですので、GraphQLだけ触ってみたい方は、これで十分です。

それでも、PostmanにこだわりたいPostman Loverな方や、REST APIも触ってみたいなどのご要望がある方は、記事を読み進めていただけると幸せになれることもあるかもしれません。

• Shopifyには、Admin APIとストアフロントAPIの2種類のAPIがあります。違いについてはこちらの記事をご覧ください。https://qiita.com/t-kurasawa/items/b0f4a832f4504145c9ac#storefront-api-%E3%81%AE%E6%A6%82%E8%A6%81
• Admin APIには、GraphQLとREST APIの両方が用意されています。本記事では、GraphQLを扱いますが、Postmanからでしたら、REST APIのテストもやりやすいため、Admin APIのREST APIを試してみたい方もこの記事が役に立つことがあるかもしれません。

環境

MacOS
Postman 9.25.0

Postmanって何？

Web APIをテストするツール、という認識でほぼ間違いありません。クラウド版もありますが、今回はデスクトップアプリ版を使用します。
Postmanの詳細についてより詳しく知りたい方や、ダウンロード方法を知りたい方は下記をご覧ください。

Postmanとは: https://ugo.tokyo/about-postman/
Postman デスクトップアプリのダウンロード: https://www.postman.com/downloads/

PostmanによるShopify APIのテスト環境を作る

手順1. Shopifyの開発ストアを用意する

もちろん、開発ストアではなく実際に運用されているストアを使用しても問題ないですが、Shopify APIは、ストアの情報を変更することも可能なので、思わぬ事故を防ぐためにも、開発用のストアを別途準備することをおすすめします。

Shopifyのパートナープログラムに登録(無料)すると、開発用のストアを無料で作成できます。
まず、Shopifyのパートナープログラムに登録しましょう。
登録は、当ブログの下記の記事を参考にすると簡単です。

Shopifyアプリの開発フローと準備　開発フロー

記事内の、「パートナーアカウントの作成」と「開発ストア」の設定を行い、開発ストアを用意します。

手順2. 開発ストアにカスタムアプリを作成し、APIのアクセストークンを2種類取得する

開発ストアの管理画面にアクセスし、下記の手順に沿って、設定していきます。

今回、取得した、Admin APIのアクセストークンと、ストアフロントAPIのアクセストークンを使って、Postmanから、Shopify APIをコールします。

手順3. Postmanのコレクションを設定する

Postmanを開きます。

準備する変数は下記になります。
INITIAL VALUEにも、CURRENT VALUEにも同じ値を設定いただけば問題ありません。

入力完了後、忘れずに設定を保存します。(MacOSであれば、Command+Sで保存されます。)

手順4. Admin APIをテストするサンプル

まず、下図のようにして新しいリクエストを作成します。

作成したリクエストを選択し、POSTを選択したら、下記のURLを設定します。
https://{{DEV_STORE}}.myshopify.com/admin/api/{{API_VERSION}}/graphql.json

Headersを選択し、次のリクエストヘッダーを追加します。
KEY: X-Shopify-Access-Token
VALUE: {{SHOPIFY_ACCESS_TOKEN}}

Bodyを選択し、GraphQLを選んだら、下記の内容をQUERYにセットします。

{
  shop {
    id
    name
  }
}

Sendをクリックし、APIコールを実施するとレスポンスが得られます。
今回セットしたQUERYからは、開発ストアのIDと名前を取得できます。

手順5. ストアフロントAPIをテストするサンプル

手順4と同様に、下図のようにして新しいリクエストを作成します。

作成したリクエストを選択し、POSTを選択したら、下記のURLを設定します。
※Admin APIとはURLが異なりますのでご注意ください。
https://{{DEV_STORE}}.myshopify.com/api/{{API_VERSION}}/graphql.json

Headersを選択し、次のリクエストヘッダーを追加します。
※こちらもAdmin APIの時とは値がそれぞれ異なりますのでご注意ください。
KEY: X-Shopify-Storefront-Access-Token
VALUE: {{SHOPIFY_STOREFRONT_ACCESS_TOKEN}}

Bodyを選択し、GraphQLを選んだら、下記の内容をQUERYにセットします。

{
  shop {
    id
    name
  }
}

Sendをクリックし、APIコールを実施するとレスポンスが得られます。
Admin APIの時と同様、今回セットしたQUERYからは、開発ストアのIDと名前を取得できます。

まとめ

いかがでしたでしょうか？
バッチリAPIのレスポンスは取得できたでしょうか？

本記事では、Admin APIやストアフロントAPIのアクセストークンの説明や、GraphQLの説明を割愛し、「こうすればPostmanからShopifyのAPIをコールできる」という手順のみのご紹介でした。

本記事をきっかけにShopify APIに興味を持ってくださる方がほんの少しでも増え、Shopifyの開発がますます盛り上がれば幸いです。

他のAPIを試す場合は、手順4や手順5の、「BodyのQuery」に入力する内容を変更するだけで問題なくAPIコールできるはずです。

最後に、ShopifyのAdmin APIとストアフロントAPIのリファレンスを付記いたしますので、気になるAPIがありましたら是非お試しください。

Shopify Admin API reference: https://shopify.dev/api/admin-graphql
Shopify ストアフロントAPI reference: https://shopify.dev/api/storefront