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

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字段是一个棱镜丰富的文本或标题字段。如果是这样的话，那么字段就是一个文本块数组。对此，您有两个选择：

1. 使用prismic-react开发工具包可以帮助您显示字段。这是这方面的书面文件。这向您展示了如何使用RichText.render()和RichText.asText()助手函数在一个反应性前端显示这个字段类型(这也适用于盖茨比)。看起来会是这样的： {RichText.asText(node.data.product_name)}
2. 如果字段只有一个文本块，则只需获取数组的第一个元素即可。如下所示： {node.data.product_name[0].text}