Shopify中通过GraphQL批量获取博客文章元字段的方法咨询

嘿，我太懂你现在的困扰了！之前在Hydrogen项目里拉博客元字段的时候，我也卡在只能单个获取的问题上，后来摸索出两个实用的方法，刚好能解决你的需求：

方法一：指定多个具体的元字段 #

如果你明确知道需要哪些元字段，直接在identifiers里传一个包含多组namespace和key的数组就行，这样一次就能拉取多个指定的元字段，不用反复调用接口。

修改你的查询语句如下：

query Blog($language: LanguageCode, $blogHandle: String!, $first: Int, $last: Int, $startCursor: String, $endCursor: String) @inContext(language: $language) {
  blog(handle: $blogHandle) {
    title
    seo {
      title
      description
    }
    articles(
      first: $first
      last: $last
      before: $startCursor
      after: $endCursor
      reverse: true
    ) {
      nodes {
        ...ArticleItem
        # 传入多个元字段标识符，每个对应一组namespace和key
        metafields(identifiers: [
          {namespace: "custom", key: "misc_content_long_text_1"},
          {namespace: "custom", key: "misc_content_short_text_2"},
          {namespace: "custom", key: "featured_badge"}
        ]) {
          namespace # 加上这个方便区分不同元字段
          key
          value
          references {
            edges {
              node {
                # 如果有引用类型的元字段（比如图片），要加对应的fragment
                ... on MediaImage {
                  url
                  altText
                }
              }
            }
          }
        }
      }
      pageInfo {
        hasNextPage
        hasPreviousPage
        startCursor
        endCursor
      }
    }
  }
}

方法二：拉取整个命名空间下的所有元字段 #

如果你需要某个命名空间下的全部元字段（比如custom下的所有字段），可以用filters参数指定命名空间，配合分页参数来获取所有内容。需要注意的是，Shopify的metafields查询有分页限制，所以要处理分页逻辑：

query Blog($language: LanguageCode, $blogHandle: String!, $first: Int, $last: Int, $startCursor: String, $endCursor: String) @inContext(language: $language) {
  blog(handle: $blogHandle) {
    title
    seo {
      title
      description
    }
    articles(
      first: $first
      last: $last
      before: $startCursor
      after: $endCursor
      reverse: true
    ) {
      nodes {
        ...ArticleItem
        # 过滤指定命名空间的所有元字段，设置first参数控制每页数量
        metafields(filters: {namespace: "custom"}, first: 10) {
          edges {
            node {
              namespace
              key
              value
              references {
                edges {
                  node {
                    ... on MediaImage {
                      url
                      altText
                    }
                  }
                }
              }
            }
          }
          # 分页信息，用来判断是否还有更多元字段需要拉取
          pageInfo {
            hasNextPage
            endCursor
          }
        }
      }
      pageInfo {
        hasNextPage
        hasPreviousPage
        startCursor
        endCursor
      }
    }
  }
}

小提示 #

• 方法一适合精准获取已知的元字段，不用处理分页，效率更高；
• 方法二适合需要批量获取某个命名空间下所有元字段的场景，记得根据pageInfo处理分页；
• 返回结果里一定要带上namespace和key，不然你没法区分每个value对应的是哪个元字段；
• 如果你的元字段包含引用类型（比如关联图片、产品），一定要在references的node里加上对应的GraphQL fragment，才能拿到实际的资源数据。

备注：内容来源于stack exchange，提问作者hanji