Retrieve Content

This article shows you how to build a Gatsby query to retrieve fields and Slices from your Prismic repository.


Retrieve fields

Content from Prismic comes in more than a dozen types. Most of these are simple primitive values, like Numbers or Booleans. Others are more complex structured values, like Titles, Rich Texts, and Links.

Simple fields

Retrieving Prismic fields is pretty straightforward. Most of them are retrieved similarly. You need to specify the API ID of the given field. These fields are:

  • Boolean
  • Color
  • Date
  • Key Text
  • Number
  • Select
  • Timestamp

Here's what retrieving any of these would look like. In the following example, we retrieve a Key Text field with the API ID of example_key_text that is at the top level of the document (outside of a Slice Zone):

Copy
query MyQuery {
  prismicPage {
    data {
      example_key_text
    }
  }
}

Example API IDs

In these examples, the fields' API ID is the same as the field itself with the prefix example_ appended at the beginning. For example: Embed would be example_embed.

Structured fields

You'll be able to get different values for the rest of the fields. Let's take a look at these examples of all the possible values you can retrieve from each of them:

  • Title and Rich Text
  • Image
  • Content Relationship
  • Link
  • Link to media
  • Embed
  • Geopoint
  • Group
Title and Rich Text
Copy
query MyQuery {
  prismicPage {
    data {
      example_title {
        text
        richText
        html
      }
    }
  }
}
Image
Copy
query MyQuery {
  prismicPost {
    data {
      example_image {
        url
        dimensions {
          width
          height
        }
        thumbnails {
          desktop {
            url
            dimensions {
              height
              width
            }
          }
          tablet {
            url
            dimensions {
              height
              width
            }
          }
        }
      }
    }
  }
}
Content Relationship
Copy
query MyQuery {
  prismicPost {
    data {
      example_content_relationship {
        link_type
        document {
          ... on PrismicExampleCustomType {
            url
            data {
              example_title {
                richText
              }
            }
          }
        }
      }
    }
  }
}
Link
Copy
query MyQuery {
  prismicPost {
    data {
      esternal_link {
        id
        isBroken
        lang
        link_type
        raw
        size
        slug
        tags
        target
        type
        uid
        url
      }
    }
  }
}
Link to media
Copy
query MyQuery {
  prismicPost {
    data {
      example_link_to_media {
        id
        isBroken
        lang
        link_type
        raw
        size
        slug
        tags
        target
        type
        uid
        url
        document
      }
    }
  }
}
Embed
Copy
query MyQuery {
  prismicPost {
    data {
      example_embed {
        author_name
        author_url
        embed_url
        height
        html
        provider_name
        provider_url
        thumbnail_height
        thumbnail_url
        thumbnail_width
        title
        type
        version
        width
      }
    }
  }
}
Geopoint
Copy
query MyQuery {
  prismicPost {
    data {
      example_geopoint {
        latitude
        longitude
      }
    }
  }
}
Group
Copy
query MyQuery {
  prismicPost {
    data {
      example_group {
        example_number_in_list
      }
    }
  }
}

Metadata fields

In prismic${CustomType} queries, the metadata fields are found in the first node of the query.

For allPrismic${CustomType} queries, the metadata fields are found inside nodes.

Now, see an example for each type of query:

  • prismic${CustomType}
  • allPrismic${CustomType}
prismic${CustomType}
Copy
query MyQuery {
  prismicPage {
    uid
    id
    lang
    type
    last_publication_date
    first_publication_date
    alternate_languages {
      lang
      type
      uid
      id
    }
  }
}
allPrismic${CustomType}
Copy
query MyQuery {
  allPrismicPost {
    nodes {
      uid
      id
      lang
      type
      last_publication_date
      first_publication_date
      alternate_languages {
        lang
        type
        uid
        id
      }
    }
  }
}

Retrieve Slices

We use the Union type inside queries to specify each of the Slices we need from a Custom Type using the following syntax:

... on Prismic${CustomType}DataBody${Slice}

Where ${CustomType} is the name of your Custom Type and ${Slice} is the name of the Slice.

Example slice

In the following example, the Slice with the API ID of playlist contains fields in both the repeatable and non-repeatable zones:

Primary

non-repeatable

1. Title field with the API ID of playlist_name

Items

repeatable

1. An Link field with the API ID of song

2. A Key Text field with the API ID of author

Example Slice query

Now, see how we retrieve our playlist Slice in a 'Page' Custom Type query.

Copy
query MyQuery {
  prismicPage {
    data {
      body {
        ... on PrismicPageDataBodyPlaylist {
          slice_label
          slice_type
          primary {
            playlist_name {
              richText
            }
          }
          fields {
            song {
              url
            }
            author {
              richText
            }
          }
        }
      }
    }
  }
}

After retrieving your Slices and fields, you're ready to Template your content. If you use many Slices inside one Custom Type, we recommend using Fragments to make your Slice queries inside your components; that way, your page queries become more readable.


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.