Storefront API：查询可变参数？

Posted 2023-03-10

【中文标题】Storefront API：查询可变参数？

【英文标题】：Storefront API: querying for variable parameters?

【发布时间】：2019-01-20 06:15:21

【问题描述】：

Shopify Storefront API examples 显示一个 App.js 视图，在一页上列出所有产品。在这些示例中，产品从该索引页面添加到购物车，并且没有产品详细信息页面。与示例不同，我想从产品索引中点击进入产品详细信息页面。

产品索引很简单。但是我在理解如何为每个产品创建一个页面时遇到了很多麻烦。

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

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

我正在使用nuxt 和vue-apollo 构建前端。

任何指针表示赞赏。

【参考方案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

【讨论】：

感谢@RozenMD。然后我需要根据路由 id 为产品动态定义 id 变量。我猜是这样的吗？ export default apollo: myQuery: query: myQuery, prefetch: ( route ) => return id: route.params.id , variables: return id: this.id

*** 上的一种格式代码到底是怎么回事？ ?

@CallumFlack 差不多了，我已经更新了我的评论，说明你在 Vue 中是如何做到的