Rendering the Key Text 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 Key Text field allows content writers to enter a single string without any special formatting like that used in the Rich Text field.

NOTE: that the Key Text field is different from a Rich Text field. As a result you cannot use RichText.render or RichText.asText because these won't work with a Key Text field.

Get the Key Text value

Here's an example of rendering a Key Text field, where we have queried the data and stored the result as a variable called document, like so. It's super easy because you can output the Key Text field directly, making this field useful for things like metadata.

In this case, the Key Text field has the API ID of label.

Copy
<p>{document.label}</p>

A full example

Now let's take a look at a full page component example. Here you can see how the Key Text field is included in the query for a document with the UID of test-page, retrieved, and templated on the page. Again in this example the API ID of the Key Text field we're retrieving is label.

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 (
    <div>
      <h1>Below is my Key Text field</h1>
      <p>{document.label}</p>
    <div/>
  )
}

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

export default Page