作者:人马上山_237 | 来源:互联网 | 2022-12-22 10:10
我正在玩prismic.io作为盖茨比网站的内容来源,我无法弄清楚为什么我无法输出某些数据.
来自gatsby的graphql工具返回所有正确的数据,因此查询本身似乎很好:
export const pageQuery = graphql`
query PageQuery {
allPrismicDocument {
edges {
node {
data{
product_image {
url
}
product_name {
text
}
product_price
product_description {
text
}
}
}
}
}
}
`
现在在页面内部,添加以下值时:
{node.data.product_price}
{node.data.product_image.url}
它工作正常并输出正确的数据.但是,当我尝试:
{node.data.product_name.text}
or
{node.data.product_name}
我什么都没得到.搜索到处都是,但是没有太多资源可以将这两个工具一起使用:/
任何指针将非常感谢:)
1> 小智..:
我猜你的product_name
领域是一个Prismic Rich Text或Title字段.如果是这种情况,那么该字段是一个文本块数组.你有两个选择:
使用prismic-react
开发工具包可帮助您显示该字段.这是针对此的Prismic文档.这将向您展示如何使用RichText.render()和RichText.asText()辅助函数在React前端显示此字段类型(这也适用于Gatsby).它看起来像这样:
{RichText.asText(node.data.product_name)}
如果该字段只有一个文本块,您可以抓住该数组的第一个元素.像这样:
{node.data.product_name[0].text}