Retrieve Fields and Slices

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
Copy
query MyQuery {
  prismicPage {
    data {
      example_title {
        text
        raw
        html
      }
    }
  }
}
Copy
query MyQuery {
  prismicPost {
    data {
      example_image {
        url
        dimensions {
          width
          height
        }
        thumbnails {
          desktop {
            url
            dimensions {
              height
              width
            }
          }
          tablet {
            url
            dimensions {
              height
              width
            }
          }
        }
      }
    }
  }
}
Copy
query MyQuery {
  prismicPost {
    data {
      example_content_relationship {
        link_type
        document {
          ... on PrismicExampleCustomType {
            url
            data {
              example_title {
                raw
              }
            }
          }
        }
      }
    }
  }
}
Copy
query MyQuery {
  prismicPost {
    data {
      esternal_link {
        id
        isBroken
        lang
        link_type
        raw
        size
        slug
        tags
        target
        type
        uid
        url
      }
    }
  }
}
Copy
query MyQuery {
  prismicPost {
    data {
      example_link_to_media {
        id
        isBroken
        lang
        link_type
        raw
        size
        slug
        tags
        target
        type
        uid
        url
        document
      }
    }
  }
}
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
      }
    }
  }
}
Copy
query MyQuery {
  prismicPost {
    data {
      example_geopoint {
        latitude
        longitude
      }
    }
  }
}
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.

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

Now, see an example for each type of query:

  • prismic${CustomType}
  • allPrismic${CustomType}
Copy
query MyQuery {
  prismicPage {
    uid
    id
    lang
    type
    last_publication_date
    first_publication_date
    alternate_languages {
      lang
      type
      uid
      id
    }
  }
}
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} 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 {
              raw
            }
          }
          fields {
            song {
              url
            }
            author {
              raw
            }
          }
        }
      }
    }
  }
}

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? Get in touch with us on our Community Forum.