从 Shopify Storefront API GraphQL 查询中获取变体父级名称：完整指南

使用 Shopify Storefront API GraphQL 查询获取变体父级名称

作为一名程序员，我经常使用 GraphQL 来获取数据，但对于新手来说，这可能会让人不知所措。最近，我遇到了一项任务，即从 Shopify Storefront API 获取变体父级名称，这让我伤透了脑筋。

问题

我的目标是创建一个数据结构，用于在屏幕上显示产品的变体和父级变体。然而，GraphQL 查询返回的标题属性中只有由斜杠分隔的变体值，没有关于它们所属父级的任何信息。

解决方案

经过一番研究，我发现可以使用 metafield 字段来解决这个问题：

metafield (key: "product_parent", namespace: "product_page") {
  value
}

此字段返回一个包含变体父级名称值的元字段。接下来，可以使用以下代码解析元字段值：

const parentName = metafield.value.split("/")[0];

更新数据结构

有了解析出的父级名称，我更新了我的数据结构：

let product = {
  title: 'Awesome Hoodie',
  variations : [{ 
    id: '1',
    name: parentName,
    values: [{
      id: '1',
      name: 'Red'

    },
    {
      id: '2',
      name: 'Blue'
    },
    {
      id: '2',
      name: 'Blue'
    }]
  },{ 
    id: '2',
    name: 'Size',
    values: [{
      id: '3',
      name: 'Small'
    },
    {
      id: '4',
      name: 'Medium'
    },
    {
      id: '5',
      name: 'Large'
    }]
  }]
}

结论

通过使用 metafield 字段和解析元字段值，我能够从 Shopify Storefront API GraphQL 查询中获取变体父级名称。这使我能够创建更复杂的数据结构，从而轻松管理变体和定价。

常见问题解答

1. 什么是元字段？
   元字段是 Shopify 用于存储附加产品和变体数据的自定义字段。

2. 如何使用 GraphQL 查询元字段？
   在你的查询中，使用 metafield 字段并指定元字段的键和命名空间。

3. 如何解析元字段值？
   取决于元字段的类型，你可以使用 JavaScript 来解析和提取所需信息。

4. 为什么使用 split('/') 来解析元字段值？
   在我们的案例中，元字段值使用斜杠分隔，因此我们使用 split('/') 函数来获取第一个分隔符之前的父级名称。

5. 我可以在哪里了解更多关于 GraphQL 和 Shopify Storefront API？
   Shopify 提供了丰富的文档和教程，可以帮助你入门：

   • GraphQL API
   • Storefront API