Contentful render long text

Question

I'm figuring out how to render standard long text, but having issues.

Please take a look at my query, that is working when ran in the graphQL playground.

{
  allContentfulArticle {
    nodes {
      title
      slug
      para {
        para
      }
    }
  }
}

Here is my article.js file

import React from "react"
import { graphql } from "gatsby"
 

const Article = props => (
  <div>
    <header>
      <h1>{props.data.site.siteMetadata.title}</h1>
    </header>

    <main>
      <h1>{props.data.contentfulArticle.title}</h1>
    </main>

    <footer>
    <p>{props.data.site.siteMetadata.author}</p>
    </footer>
  </div>
)

export default Article

export const query = graphql`
  query Article($id: String) {
    site {
      siteMetadata {
        title
        description
        author
      }
    }
    contentfulArticle(id: { eq: $id }) {
      title
      subtitle
      slug
      para {
        para
      }
    }
  }
`

The strange thing is that I can render the title easily which is a simialir content type - just short.

I can see my title, slug and other metadata fields being displayed on localhost, but not the para paragraph.

Answer 1

You are not rendering your long text field despite your GraphQL query looks perfect. Just use:

import React from "react"
import { graphql } from "gatsby"
 

const Article = props => (
  <div>
    <header>
      <h1>{props.data.site.siteMetadata.title}</h1>
    </header>

    <main>
      <h1>{props.data.contentfulArticle.title}</h1>
    </main>
    <p>Your long text is: {props.data.contentfulArticle.para.para}</p>
    <footer>
    <p>{props.data.site.siteMetadata.author}</p>
    </footer>
  </div>
)

export default Article

export const query = graphql`
  query Article($id: String) {
    site {
      siteMetadata {
        title
        description
        author
      }
    }
    contentfulArticle(id: { eq: $id }) {
      title
      subtitle
      slug
      para {
        para
      }
    }
  }
`