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

Question

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

我什么都没得到.搜索到处都是,但是没有太多资源可以将这两个工具一起使用:/

任何指针将非常感谢:)

Answer 1

我猜你的product_name领域是一个Prismic Rich Text或Title字段.如果是这种情况,那么该字段是一个文本块数组.你有两个选择:

1. 使用prismic-react开发工具包可帮助您显示该字段.这是针对此的Prismic文档.这将向您展示如何使用RichText.render()和RichText.asText()辅助函数在React前端显示此字段类型(这也适用于Gatsby).它看起来像这样:

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

2. 如果该字段只有一个文本块,您可以抓住该数组的第一个元素.像这样:

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