在 GatsbyJS 前端显示来自 Prismic.io 的数据

Posted 2023-03-08

【中文标题】在 GatsbyJS 前端显示来自 Prismic.io 的数据

【英文标题】：Show data from Prismic.io in GatsbyJS frontend

【发布时间】：2018-09-12 13:24:56

【问题描述】：

我正在使用 prismic.io 作为 gatsby 网站的内容源，但不知道为什么我不能输出某些数据。

来自 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 documentation for this。这向您展示了如何使用 RichText.render() 和 RichText.asText() 辅助函数在 React 前端显示此字段类型（这也适用于 Gatsby）。它看起来像这样：

RichText.asText(node.data.product_name)

如果字段只有一个文本块，您可以只获取数组的第一个元素。像这样：

node.data.product_name[0].text

【讨论】：

是的，非常感谢！现在我只是尝试了第二种方式，它就像一个魅力。肯定会在周末摆弄你的第一个建议:)