我无法从 Moltin API 获取文件以显示在主产品图片下。
我正在使用此存储库:https://github.com/moltin/gatsby-demo-store并将
@moltin/gatsby-source-moltin
更新到1.3.1。我尝试扩展产品节点架构以包含按照 Moltin API 文档的关系,然后在新组件中引用它,但没有渲染任何其他图像。
我查看了其他实现,即 Gatsby Store 示例,它使用缩略图并可以获得微小的可点击的紫色细条渲染,但没有图像。该商店使用 Shopify 和 localFile 存储进行图像渲染,因此此用例不适用。
import React, { useContext, useEffect, useReducer, useState } from 'react'
import { graphql, withPrefix } from 'gatsby'
import SEO from '../components/SEO'
import Photo from '../components/Photo'
import Badge from '../components/Badge'
import AddToCart from '../components/AddToCart'
import { Shopkit } from '../shopkit'
import Img from 'gatsby-image'
const {
meta: { display_price }
} = product
return (
<React.Fragment>
<SEO
type="product"
title={product.meta_title || product.name}
description={product.meta_description || product.description}
image={withPrefix(product.mainImage.childImageSharp.fixed.src)}
/>
<div className="flex flex-wrap md:bg-grey-light">
<div className="py-2 md:py-5 md:px-5 w-full lg:w-1/2">
<div className="sticky pin-t">
<Photo
src={product.mainImage}
alt={product.main_image_alt_text || product.name}
/>
<Img
src={product.relationships.files.data.id}
alt=""
/>
</div>
</div>
......
.....
....
</React.Fragment>
)
}
export const query = graphql`
query($id: String!) {
product: moltinProduct(id: { eq: $id }) {
id
slug
name
description
sku
mainImage {
childImageSharp {
fixed(width: 560) {
...GatsbyImageSharpFixed
}
}
publicURL
}
meta {
display_price {
without_tax {
formatted
}
}
}
manage_stock
meta_title
meta_description
on_sale
bulb
bulb_qty
material
finish
max_watt
relationships {
main_image {
data {
id
}
}
files {
data {
type
id
}
}
}
`
export default ProductPage
我想在主要产品图像下方呈现小缩略图。使用 Img 组件时控制台错误消息:
未捕获类型错误:无法读取未定义的属性“src”。
gatsby-source-moltin
将 images
字段添加到产品架构中,您可以像这样查询:
images {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
我在 CodeSandbox 上整理了一个示例。