Rendering the Boolean field

Prismic no longer recommends the gatsby-source-prismic-graphql plugin

With recent changes to Gatsby, Prismic no longer recommends the gatsby-source-prismic-graphql plugin that this documentation uses. Read more about the future of Prismic and Gatsby. We highly recommend using the gatsby-source-prismic instead. The documentation for this plugin can be found in the plugin's github README.

We will leave this documentation here for now, but will change it in the future when we determine the best approach for Prismic & Gatsby.

The Boolean field will add a switch for true or false values for the content authors to pick from. This is field that can have many use cases.

Get the Boolean value

In this example we use the true or false value of the Boolean field to set a variable to right or left in the project. In the following example, the Boolean field has the API ID of is_right_aligned. This assumes that you have saved the document object in a variable named document as shown in the Retrieve the document object page.

Copy
const position = document.is_right_aligned ? 'right' : 'left'

NOTE: This example works well if you have used the labels in the Custom Type builder to correspond to these values as well. This way your writers can select the correct values, like in the image below.

Full Example

Now let's take a look at a full page component example. Here you can see how the Boolean field is included in the query for a document with the UID of test-page. We then retrieve it and use it to set a variable. Then we use that variable on the page to set the CSS class of a div which dictates if the content will be aligned left or right. Again in this example the API ID of the Boolean field we're retrieving is is_right_aligned.

Copy
import React from 'react'
import { graphql } from 'gatsby'

const Page = ({ data }) => {
  const prismicContent = data.prismic.allPages.edges[0]
  if (!prismicContent) return null
  const document = doc.node

  const position = document.is_right_aligned ? 'right' : 'left'
  return ( 
    <div className={position}>
      <h2>Text positioned by Boolean value...!</h2>
    </div>
  )
}

export const query = graphql`
query {
  prismic {
    allPages(uid: "test-page") {
      edges {
        node {
          is_right_aligned
        }
      }
    }
  }
}
`

export default Page