Storefront api で metafieldを取得したい

日本語 ディスカッション 技術的なQ＆A

Topic summary

課題: Storefront APIでブログ記事のメタフィールド（画像リストと商品リスト）を取得する際、GID（グローバルID）のみが返却され、商品名や画像URLなどの詳細情報が取得できない。

解決策:

  • nodesクエリの活用: 複数のGIDに対して一度のリクエストで詳細情報を取得可能。個別リクエストと比較してリクエスト回数を削減できる。
  • コード例として、nodes(ids: ["gid://shopify/MediaImage/1", ...])のような形式で画像や商品情報を一括取得する方法が提示された。

追加の提案:

  • list.product_reference等のメタフィールドタイプの場合、metafield.referencesを利用すれば1回のクエリで取得可能。

結果: 質問者は求めていた答えが得られ、解決に至った。公式ドキュメントへのリンクも共有されている。

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

いつも大変参考にさせていただいております。

さて、表題のとおり Storefront API をGraphqlを用いてJSで取得する場合（今回はブログ記事を例とします）、

メタフィールド（画像リスト と 商品リスト）を取得することはできたのですが、

JSONには

gid: という リソースIDベースで返ってきます。

gid:をまたAPIで呼び出し、画像のURLや商品名などをループして取得するしかないのでしょうか。

リストなので沢山あり、都度Graphqlリクエストするのは時間的にもリクエストレート的にも厳しいと思いますが、

なにか解決方法をご存じの方ご教示いただけますと幸いです

2

初めまして。

メタフィールドにより紐づけられた商品や画像は、gidが返却されるのみで、詳細情報を得ることができません。
そのため、再度APIリクエストを送って詳細情報を取得する必要があります。

ただし、個別にリクエストを送るのではなく、nodesというクエリを使うことで

一度に複数のgidに対して情報を取得することができます。これにより、リクエストの回数を減らすことが可能です。

以下に、nodesクエリを使用して複数の画像と商品の情報を一括で取得する例を示します。

query {
  images: nodes(ids: ["gid://shopify/MediaImage/1", "gid://shopify/MediaImage/2"]) {
    ... on MediaImage {
      id
    }
  }
  products: nodes(ids: ["gid://shopify/Product/1", "gid://shopify/Product/2"]) {
    ... on Product {
      id
    }
  }
}

公式ドキュメントも参考にしてください

https://shopify.dev/docs/api/storefront/2024-04/queries/nodes

ご参考になれば幸いです。

3

ご丁寧に回答いただきありがとうございます！

まさに、求めていた答えでした。

また、複数のGIDでリクエストできることもとてもありがたいと思いました。

この度はどうもありがとうございました。

4

メタフィールド（画像リスト と 商品リスト）

これがlist.product_reference等のことを指してる場合、metafield.referencesを利用すれば1回のクエリで取得できます。

https://shopify.dev/docs/apps/build/custom-data/metafields/list-of-data-types#list-types

https://shopify.dev/docs/api/storefront/2024-04/objects/Metafield#connection-references

1 Like