1

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

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

任何指针将不胜感激:)

4

1 回答 1

5

我猜您的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}

于 2018-04-03T09:41:45.073 回答