Retrieve Prismic content fields

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.

Here we will show you how to add Prismic content fields to your GraphQL queries. In most cases, it's as simple as adding the field's API ID.

The field types that are bit more complicated are:

  • Groups
  • Slices
  • Links / Content Relationships

These are covered in the More complicated fields section below.

Specify the API ID

As mentioned above, you just need to include the API ID in order to include the following fields:

  • Boolean
  • Color
  • Date
  • Embed
  • GeoPoint
  • Image
  • Key Text
  • Number
  • Rich Text / Title
  • Select
  • Timestamp

Simple example

Here is a simple example that shows how to retrieve a few of these fields. In this case, we're querying all the documents of the type "Page" and retrieving the following fields:

  • Title field with the API ID of page_title
  • Image field with the API ID of main_image
  • Rich Text field with the API ID of page_summary
query {
  prismic {
    allPages {
      edges {
        node {

And it's as simple as that!

More complicated fields

As mentioned above, there are a few fields that are a bit more complicated. For that reason, we've created dedicated articles for these which you can explore here:

Retrieving content from a linked document

If you are trying to retrieve content from a Content Relationship or Link field, we also have a dedicated article for that here: Retrieve linked document content.