Question

我一直在关注查询Stripe API和显示数据的教程。没有提到的一件事是如何查询图像并显示它。从结构中可以看到images属性在那里，但是我需要一些帮助来显示它。我认为它应该与显示产品名称的逻辑相同，但是我只需要了解对图像遵循相同的逻辑即可。

这是我的查询，我在查询中添加了image选项：

并可以在GrapiQL中查看结果：

这是我如何映射产品以正确显示的示例。据我了解，我需要对图像执行相同的操作。我遵循相同的逻辑，只是将产品替换为图像，但似乎无法使其正常工作。这是代码段：

const Products = () => {
  return (<StaticQuery query={PRODUCTS_QUERY}
    render={
      ({ allStripeSku, allStripeProduct }) => {

        return allStripeProduct.edges.map(product => {
          const skus = allStripeSku.edges.filter(
            sku => sku.node.product.id === product.node.id
          )
          return (
            <Product
              key={product.node.id}
              skus={skus}
              product={product.node} />
          )
        })
        return
      }
    }
  />)
}

有人可以指出我的正确方向，以便我可以正常工作吗？

Answer 1

您需要添加两行代码：

在GraphQL查询中返回images和id，同时返回name
在ProductCard组件中使用上面添加的查询字段返回<img>元素

对我来说，这意味着在下面添加+行：

我认为是您关注的Gatsby E-commerce Tutorial；如果是这样，请注意，自您的OP以来，他们已经no longer uses the deprecated Orders API对文档进行了更新。

查询条纹api和显示图像

1 个答案: