Rendering the Metadata

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.

Before you render the meta data of your documents, you will need to know how to retrieve it as shown in this article. There are many different use cases for rendering this information, luckily for most of them it's pretty straight forward as show below. A more complex example would be the alternateLanguages field for which we have made a standalone article.

Render the UID value

The UID field is a unique identifier that can be used specifically to create SEO-friendly website URLs. Here's how you would render the UID value from the retrieved document object. This assumes that you have saved the document object in a variable named document as shown in the Retrieve the document object page.

Copy
return (
  <h1>Document UID: {document._meta.uid}</h1>
)

Render the Publication Date fields

The metadata hosts two different Publication Date fields, lastPublicationDate & firstPublicationDate. These fields can not be edited manually: the firstPublicationDate field will never change after a document is published and the lastPublicationDate will update every time the article is republished.

Below you can see a basic example of how to render the firstPublicationDate field.

Copy
return (
  <h1>Document Published: {document._meta.firstPublicationDate}</h1>
)

Rendering Tags

The rest of the fields follow the pattern shown above, except for the tags field which is an array as shown in the example below:

Copy
return (
  <ul>
    {document._meta.tags.map((tag, index) => (
      <li key={`tag-${index}`}>{tag}</li>
    ))}
  </ul>
)

NOTE: The alternateLanguages field is also more complex and you can learn more about it here.

A full example

Now let's take a look at a full page component example. Here you can see how the UID field is included in the query for a document with the UID of test-page. After running the query, we retrieve the metadata, and render the uid on the page as part of a welcome message. The final result of which would be "Welcome to my test-page". We also use the firstPublicationDate field to show when the page was created and the tags to show the categories of the page.

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

const Page = ({ data }) => {
  const document = data.prismic.allPages.edges[0].node
  return (
    <div>
      <h2>Welcome to my {document._meta.uid}</h2>
      <h4>Categories</h4>
      <ul>
        {document._meta.tags.map((tag, index) => (
          <li key={`tag-${index}`}>{tag}</li>
        ))}
      </ul>
      <p>This page was first published: {document._meta.firstPublicationDate}</p>
    </div>
  )
}

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

export default Page