Показать данные из Prismic.io в интерфейсе GatsbyJS

Question

Я играл с prismic.io в качестве источника контента для сайта Гэтсби и просто не могу понять, почему я не могу вывести определенные данные.

Инструмент graphql из gatsby возвращает все нужные данные, поэтому сам запрос выглядит нормально:

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}