1

I was playing around with prismic.io as a content source for a gatsby site and just can't figure out why I can't output certain data.

The graphql tool from gatsby returns all the right data so the query itself seems fine:

export const pageQuery = graphql`
query PageQuery {
    allPrismicDocument {
      edges {
        node {
          data{
             product_image {
              url
            }
            product_name {
              text
            }
            product_price
            product_description {
              text
            }
          }
          }
        }
      }
    }
`

Now inside the page, when adding values such as:

{node.data.product_price}
{node.data.product_image.url}

it works just fine and outputs the correct data. However when I try:

{node.data.product_name.text}
or
{node.data.product_name}

I get nothing at all. Searched everywhere but there aren't many resources for using these two tools together yet:/

Any pointers would be much appreciated :)

Martin Conde
  • 345
  • 3
  • 15

1 Answers1

5

I'm guessing that your product_name field is a Prismic Rich Text or Title field. If that's the case, then the field is an array of text blocks. You have two options for this:

  1. Use the prismic-react development kit to help you display the field. Here is the Prismic documentation for this. This shows you how to use the RichText.render() and RichText.asText() helper functions to display this field type on a React front-end (which should work for Gatsby as well). It would look something like this:

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

  2. If the field only has one block of text, you could just grab the first element of the array. Like this:

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

Community
  • 1
  • 1
Levi G
  • 111
  • 1
  • Yes it worked thank you so much!! for now I just tried the 2nd way which works like a charm. Will fiddle around with your first suggestion over the weekend for sure:) – Martin Conde Apr 03 '18 at 09:58