使用 Shopify JavaScript Buy SDK 自定义查询检索文章对象，包括其图像答案

【问题标题】：Retrieve article object including its image using the Shopify JavaScript Buy SDK custom query使用 Shopify JavaScript Buy SDK 自定义查询检索文章对象，包括其图像
【发布时间】：2019-01-23 21:02:39
【问题描述】：

我正在使用 shopify-buy SDK 尝试在前端使用 JavaScript 从我的 Shopify 商店中获取文章，遵循此处的“扩展 SDK”说明：https://shopify.github.io/js-buy-sdk/#expanding-the-sdk。

使用下面的代码，我可以检索我的文章和一些我需要的字段。

// Build a custom query using the unoptimized version of the SDK
const articlesQuery = client.graphQLClient.query((root) => {
  root.addConnection('articles', {args: {first: 10}}, (article) => {
    article.add('title')
    article.add('handle')
    article.add('url')
    article.add('contentHtml')
  })
})

// Call the send method with the custom query
client.graphQLClient.send(articlesQuery).then(({model, data}) => {
  console.log('articles data')
  console.log(data)
})

但是，我确实还需要为每篇文章提取特色图片，不幸的是，当我在我的文章查询中添加 article.add('image') 行时，生成的文章数据记录 null。我尝试构建一个自定义 productsQuery，但有一个类似的问题 - 我可以检索一些产品字段，但是当我尝试添加行 product.add('images') 时，我只是从店面 API 得到 null。

有没有人有构建自定义/扩展查询和成功检索图像的经验？

【问题讨论】：

可以添加console.log(data)的输出吗？
你试过img吗？如果返回 null，则文章没有图像或您尝试访问的属性名称不存在。您在任何地方找到了正确的关键字来检索图像，或者在您的文章中添加 image 是您的想法？

标签： javascript shopify shopify-javascript-buy-sdk

【解决方案1】：

尝试以下操作：

// Fetch all products in your shop
client.graphQLClient.fetchAll().then((acticles) => {
  console.log(acticles);
});

然后在控制台中检查您的文章有哪些可用的属性名称。如果 SDK 允许您获取任何图像数据，那么肯定应该有 imageSrc || 之类的东西。 imageUrl || img......

【讨论】：

【解决方案2】：

感谢 js-buy-sdk 存储库的 github 问题部分的 Rebecca Friedman 提供了这个可行的解决方案：

const articlesQuery = client.graphQLClient.query((root) => {
  root.addConnection('articles', {args: {first: 10}}, (article) => {
    article.add('title')
    article.add('handle')
    article.add('url')
    article.add('contentHtml')
    article.addField('image', {}, (image) => {
      image.add('id')
      image.add('originalSrc')
    })
  })
})

// Call the send method with the custom query
client.graphQLClient.send(articlesQuery).then(({model, data}) => {
  console.log('articles data')
  console.log(data) // works!
})

因为image字段是它自己的对象，所以你必须添加一个回调函数来指定你需要的字段。

【讨论】：