ShopifyのGraphQL Storefront APIでJavaScriptでブログの記事を取得する方法

あまり深くは追えていませんが、ShopifyのGraphQL Storefront APIを使いJavaScriptでブログの値を取得した時のメモです。

GraphQL Storefront APIを使えば、topページなどでも簡単にブログ記事を表示できるのではないかと考えfor文50記事推奨問題や無駄なloopなどの解消になるかなと思い調べていた時のものです。ブログ関連の情報は少ないので誰かの役に立つかもしれないの残そうと思います。

shopify liquidではループできる記事数が50記事しか推奨？されていない問題が発覚。 shopifyで独自でブログ記事一覧をページネーションさせて特定のタグの記事一覧を表示させようと思いました。しかしできないというか諦め...

GraphQL Storefront APIとは

簡単に言えば、Shopifyの商品や顧客データを Storefront API を使って取得できます。
そのためアプリやshopify環境ではないWebサイトなどにもShopifyのデータを受け渡すことが可能になります。

詳しくはShopifyのサイトをご確認ください。

https://shopify.dev/docs/api/storefront

Storefront APIのアクセストークンを取得

わかりやすく説明されている方がいたのでそちらを参考にStorefront APIのアクセストークンを取得していただければと思います。

参考サイト：ShopifyのStorefront API（ストアフロントAPI）を使って、自由自在にストア情報を表示しよう！|オカログ

ブログ記事をJSで取得するサンプルコード

shop名とアクセストークンを任意のものに書き換えると動きます。（blogに記事がないと何も表示されないと思いますが。）

const query = `{
  
    articles(first: 2) {
      edges {
        node {
        handle
        id
        image{
        url
        }
        blog{
        authors{
        firstName
        }
        handle
        id
        }
        }
      }
    }
  }`;



function apiCall(query) {
	return fetch("https://[shop-name].myshopify.com/api/2023-01/graphql.json", {
		//[shop-name]にはストアのURLを入力します。
		method: "POST",
		headers: {
			"Content-Type": "application/graphql",
			"X-Shopify-Storefront-Access-Token": "", //Storefront APIのアクセストークンを入力します
		},
		body: query,
	}).then((response) => response.json());
}

apiCall(query).then((response) => {
	console.log(response);
});

3行目あたりのarticles(first: 2)で最初の2件と指定して取得しています。lastやbeforeもあるらしいのですが、いまいち書き方わからず。

絞り込む場合

タグを絞り込む場合は条件を追加します。3行目あたりのarticlesの箇所に追加していきます。

const query = `{
  
    articles(first: 4, query:"tag:タグ名") {
      edges {
        node {
        handle
        id
        blog{
        authors{
        firstName
        }
        handle
        id
        }
        }
      }
    }
  }`;



function apiCall(query) {
	return fetch("https://[shop-name].myshopify.com/api/2023-01/graphql.json", {
		method: "POST",
		headers: {
			"Content-Type": "application/graphql",
			"X-Shopify-Storefront-Access-Token": "Storefront APIのアクセストークン",
		},
		body: query,
	}).then((response) => response.json());
}

apiCall(query).then((response) => {
	console.log(response);
});

query:”Categories:News”などにすればカテゴリを指定して取得することも可能です。

表示結果の例

APIなのでconsole画面を開いてJSを貼り付けるだけで取得できることが確認できます。

おわり

きっともっといろいろなことができるんだと思うのですが、なかなかdevサイトみても解読難しく、目的を果たして満足してしまいました。