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

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

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

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

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

1 个答案: