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

Question

我正在使用 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}

我什么也得不到。到处搜索，但还没有很多资源可以同时使用这两个工具：/

任何指针将不胜感激:)

Answer 1

我猜您的 product_name 字段是 Prismic Rich Text 或 Title 字段。如果是这种情况，则该字段是一个文本块数组。您有两种选择：

1. 使用prismic-react 开发工具包帮助您显示该字段。这是Prismic documentation for this。这向您展示了如何使用 RichText.render() 和 RichText.asText() 辅助函数在 React 前端显示此字段类型（这也适用于 Gatsby）。它看起来像这样：

   {RichText.asText(node.data.product_name)}

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

   {node.data.product_name[0].text}