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

Question

我正在尝试 prismic.io 作为 gatsby 网站的内容源，只是想不通为什么我不能输出某些数据。

来自 gatsby 的 graphql 工具 returns 所有正确的数据，因此查询本身看起来很好：

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 字段。如果是这样，那么该字段就是一个文本块数组。您有两种选择：

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

{RichText.asText(node.data.product_name)}
如果该字段只有一个文本块，您可以只获取数组的第一个元素。像这样：

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

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

Show data from Prismic.io in GatsbyJS frontend

graphql

gatsby

prismic.io