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

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

Shopify GraphQL Storefront APIで商品・記事・メタフィールドを取得する書き方の例 📝

過去にも商品一覧ブログ記事一覧を取得したことがあったのですが、GraphQLの書き方を調べながらいろんなものを取得してみたので書き方をメモしておきます。

blog.kimizuka.org
blog.kimizuka.org

商品一覧取得の書き方例

{
  products(first: 10) {
    edges {
      node {
        id
        title
      }
    }
  }
}

これで商品一覧を10件取得できます。
返ってくる値はIDとタイトルです。

メタフィールド取得の書き方例

{
  products(first: 10) {
    edges {
      node {
        metafields(first:10) {
          edges {
            node {
              key
              value
            }
          }
        }
        id
        title
      }
    }
  }
}

商品にメタフィールドを設定している場合、これでメタフィールドのキーと値を10件取得することができます。

2023.07.21 追記

上記の書き方だと取得できなくなったようです。

blog.kimizuka.org

フィルターの書き方例

{
  products(first: 10, query:"tag:hoge") {
    edges {
      node {
        id
        title
        tags
      }
    }
  }
}

queryに文字列を渡すと絞り込みを行うことができるので、これで、hogeタグが付いている商品を10件取得することができます。

商品取得の書き方例

{
  node(id:"HOGEHOGE") {
    ...on Product {
      metafields(first:10) {
        edges {
          node {
            key
            value
          }
        }
      }
      id
      title
      tags
    }
  }
}

商品のIDを渡して1件取得する例はこんな感じです。
メタフィールド、ID、タイトル、タグを取得しています。

ブログ一覧取得の書き方例

{
  blogs(first: 10) {
    edges {
      node {
        id
        title
      }
    }
  }
}

これでブログの10件取得できます。
返ってくるのはIDとタイトルです。

ブログ取得の書き方例

      {
        blogs(first:1, query:"title:HOGEHOGE") {
          edges {
            node {
              id,
              articles(first:10) {
                edges {
                  node {,
                    title,
                    contentHtml
                  }
                }
              }
            }
          }
        }
      }

これでタイトルがHOGEHOGEのブログを取得できます。
返ってくるのはIDと記事10件(タイトルと本文のHTML)です。