Shopify Storefront API：未知Metafield Key时获取变体元字段

首先明确：要通过Storefront API拿到变体的metafield值，必须知道它的命名空间（Namespace）和键（Key），这两个是metafield的唯一标识。

1. 找到变体metafield的Namespace和Key #

直接在Shopify后台查看即可：

• 打开目标产品详情页，找到对应变体并点击「编辑变体」
• 拉到页面底部的「元字段」区域，就能看到已设置的metafield的命名空间和键
• 若有大量变体或metafield，也可通过后台「元字段管理器」（Settings → Metafields → Products → Variants）查看所有变体级别的元字段

2. 修改GraphQL查询代码 #

你的现有代码仅请求了metafield的标识信息（key、namespace、type），未获取实际值，也未指定筛选条件，需按以下方式调整：

情况1：获取单个指定的metafield #

已知目标metafield的namespace和key时，直接在查询里指定参数，并添加value字段获取具体值：

const productFragment = /* GraphQL */ `
  fragment product on Product {
    # 保留原有产品字段...
    variants(first: 250) {
      edges {
        node {
          # 保留原有变体字段...
          # 替换原metafield查询
          metafield(namespace: "你的命名空间", key: "你的键") {
            key
            namespace
            type
            value # 获取metafield的实际值
          }
        }
      }
    }
    # 保留原有产品字段...
  }
  ${imageFragment}
  ${seoFragment}
`

情况2：获取多个指定的metafield #

用metafields复数形式，通过namespaces和keys参数批量筛选：

variants(first: 250) {
  edges {
    node {
      # 保留原有变体字段...
      metafields(namespaces: ["custom", "inventory"], keys: ["size_guide", "low_stock_alert"], first: 10) {
        edges {
          node {
            key
            namespace
            type
            value
          }
        }
      }
    }
  }
}

情况3：获取变体所有可访问的metafield #

若不确定所有key和namespace，可先不指定筛选参数，拉取该变体所有允许Storefront API访问的metafield：

variants(first: 250) {
  edges {
    node {
      # 保留原有变体字段...
      metafields(first: 250) { # first参数最大值为250，是Storefront API的限制
        edges {
          node {
            key
            namespace
            type
            value
          }
        }
      }
    }
  }
}

注意事项 #

• 必须确保metafield在Shopify后台开启了「允许通过Storefront API访问」的权限，否则无法查询到
• 2024-10版本中，metafields的first参数最大值为250，与变体的查询限制一致
• 若metafield为复杂类型（如json），value会返回JSON字符串，需在前端自行解析

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ