Storefront :查询变量参数？

Question

Shopify 店面API示例显示一个App.js视图，其中列出了一个页面上的所有产品。在这些示例中，产品从这个索引页面添加到购物车中，并且没有产品详细信息页。与示例不同，我希望从产品索引中单击“产品详细信息”页面。

产品指标简单。但是我很难理解如何为每个产品创建一个页面。

似乎我不能在Shopify店面上使用带有变量的graphql查询。例如，这失败了：

query myQuery($id: ID!) { Product(id: $id) { id title } }

我正在使用努克斯特和vue-阿波罗来构建前端。

任何指南针都会赏识。

Answer 1

您提供的查询缺少正在查询的实际变量值。

指向GraphQL端点的HTTP请求的主体应该如下所示：

query:"query myQuery($id: ID!) {
  Product(id: $id) {
    id
    title
  }
}"
variables:{id: "ce03707f-971e-4c64-853c-06a8c2e21448"}

编辑: Vue特定示例：

// Apollo-specific options
apollo: {
  // Query with parameters
  ping: {
    // gql query
    query: gql`query PingMessage($message: String!) {
      ping(message: $message)
    }`,
    // Static parameters
    variables: {
      message: 'Meow',
    },
  },
},

来自：https://akryum.github.io/vue-apollo/guide/apollo/queries.html#query-with-parameters