获取动态数据 - remix 运行 - storefrontapi - graphql

Question

我在 Remix 运行和 shopify 店面 api 上尝试获取动态数据时遇到问题。我能够从 API 中获取所有产品，但是当我想获取特定产品的数据时，例如 - 当您单击其中一个产品时，我收到错误消息

消息：“字段 'product' 在类型 'QueryRoot' 上不存在”，

使用网站上的 shopify graphql，我的查询工作正常，但是当我尝试在 remix 上实现它时，它就不起作用

export async function getProduct(slug: any):Promise<any> {
  const variable = {id: slug}
  const URL = `${domain}/api/2021-07/graphql.json`
  const query = `
  query GetProductsById($id: ID!) {

  product(id: $id) {
    title
     featuredImage {
       id
     }
  }
}
  `
  
  
  const options = {
    endpoint: URL,
    method: "POST",
    headers: {
      "X-Shopify-Storefront-Access-Token": storefrontAccessToken,
      "Accept": "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ query, variable })
  }
  
  try {
    const response: Response = await fetch(URL, options);
    const data = await response.json()
    return data
  
  
  } catch (error) {
  
    throw new Error("Products not fetched")
  }
  }

这是错误信息

GET /products/Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzY5NjQ2MDEzMjM2NjA=?_data=routes%2Fproducts%2F%24slug 200 - - 25.181 ms
[1] {
[1]   errors: [
[1]     {
[1]       message: "Field 'product' doesn't exist on type 'QueryRoot'",
[1]       locations: [Array],
[1]       path: [Array],
[1]       extensions: [Object]
[1]     },
[1]     {
[1]       message: 'Variable $id is declared by GetProductsById but not used',
[1]       locations: [Array],
[1]       path: [Array],
[1]       extensions: [Object]
[1]     }
[1]   ]
[1] }

有没有人知道我做错了什么？

Answer 1

我认为这里有两个问题：

product 在您使用的 Storefront API 版本 (2021-07) 中不存在，它仅在 2021-10 中引入。如果您无法升级，可以使用 node 代替，代码示例如下。
在您的请求中将 variable 重命名为 variables。

query getProductById($id: ID!) {
  node(id: $id) {
    ... on Product {
      title
    }
  }
}

获取动态数据 - remix 运行 - storefrontapi - graphql

Fetching dynamic data - remix run - storefrontapi - graphql

graphql

shopify

shopify-api

remix.run