Rendering the Select 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 Select field will add a dropdown select box of choices for the content authors to pick from.

NOTE: If you want a select dropdown for your frontend website, then you should model it with a Group field.

Rendering the Select field is pretty simple so we're going to look at a full page component example.

Full working example

Here you can see how the Select field is included in the query for a document with the UID of test-page. We then set the result object as a variable called document and template the Select field content on the page. The API ID of the Select field we're retrieving is category.

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

  return (
    <p>Category: {document.category}</p>
  )
}

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

export default Page