Shopify GraphQL Storefront APIでメタフィールドを取得する書き方の例（2023-07） 📝

かつては、こちらの記事を参考にメタフィールドを取得していました。

www.shopify.com

メタフィールド取得例

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

blog.kimizuka.org

参考にした記事が書かれたのは2020年ですが、2022年2月の時点では上記の書き方で問題なく取得できていました。
しかし、最近変更が入ったようなので、僕はmetafieldsではなくmetafieldで取得するようになりました。

{
  products(first: 10) {
    edges {
      node {
          metafield(namespace: "namespace", key: "key") {
            key
            value
          }
      }
    }
  }
}

namespaceとkeyはShopifyの管理画面でメタフィールドを作成するときに設定する「ネームスペースとキー」を入力する必要があります。
複数のメタデータを同時に取得したい場合は、

{
  products(first: 10) {
    edges {
      node {
          hoge: metafield(namespace: "namespace", key: "hoge") {
            key
            value
          }
          fuga: metafield(namespace: "namespace", key: "fuga") {
            key
            value
          }
          piyo: metafield(namespace: "namespace", key: "piyo") {
            key
            value
          }
      }
    }
  }
}