【Shopify】Storefront APIの使い方！【GraphQL】 | おっちゃんのマレーシア移住日記

こんにちは、grandstreamです。

今回は、Storefront APIを用いて、Shopifyストアのデータを取得する方法を解説します！

なお本記事は、Storefront APIを初めて使用する方を対象にしています。

Storefront APIの使用方法

では、順に説明していきます。

と言っても、2ステップで完了します。

まずは、アクセストークンの発行です。

Shopifyストアの管理画面から、「アプリ管理」→「プライベートアプリを管理する」に進みます。

次に、「新しいプライベートアプリを作成する」をクリック。

アプリの詳細のところで、お好みの「プライベートアプリ名」、「メールアドレス」を入力。

下にスクロールすると、ストアフロントAPIの部分があるので、「このアプリがストアフロントAPIを使用してストアフロントデータにアクセスできるようにする」をクリック。

ストアフロントAPI権限のところも必要箇所をチェックしましょう。

で、最後に保存します。

保存後に、再びストアフロントAPIのところを見ると、アクセストークンが発行されているのがわかります。

これでアクセストークンの発行が完了しました！

では、さっそくStorefrontAPIからデータを取得してみましょう。

以下のjavascriptコードをコピペするだけです。（コードの詳しい解説は後ほど。）

なお、ショップ名[shop-name]とアクセストークン[Your storefront access token]は各自のもので置き換えてください。

なお、貼り付ける場所ですが、ご自分のShopifyストアのデータを引っ張ってきたいサイト（ワードプレスブログなど）のjsファイルでOK。

結果をデベロッパーツールのコンソールで確認してみましょう。

ちゃんとデータが取得できているはずです。

では、先程コピペしたコードを詳しく見てみましょう。

こちらのコードでは、GraphQLのqueryを設定しています。

今回は最もシンプルに、ショップ名を取得するクエリを記述しています。

ここを書き換えれば、商品やコレクションなど、様々なデータを取得することができます。（公式ドキュメント：GraphQL queries）

apiCallという任意の関数を作成して、先程の「query」を引数に設定しています。

「”body”: query」の部分に、先程設定したqueryが代入されます。これをStorefront API側にPOST送信して、「shopのnameをください！」とリクエストしているわけですね。

また、先程は触れませんでしたが、urlの「2020-10」の部分は、なるべく最新バージョンを利用すると良いと思います。（公式ドキュメント）

あと、そもそもfetchってなんやねん！という方のためにわかりやすい動画を貼っておきます。

この部分で、先程のリクエストして返ってきた結果（response）をconsole.logで表示しています。

このデータを用いて外部サイトに色々と動的に表示できるわけですね。

今回はStorefront APIの使い方について、簡単に解説しました。（なお、本記事はこちらの記事を参考にさせて頂きました。）

とりあえずShopifyストアからデータを取得できれば後はこっちのもんですね。

GraphQLの使い方についても、機会があればまた記事にしたいと思います。

では、今回はこのへんで。