Retrieve Slices

This article shows you how to set up your Gatsby query to retrieve Slice Zone content from your Prismic repository.


Example Slices

We will always need to use the Union type when retrieving Slices. Then we need to specify the fields we need from each Slice type. We'll see how to do that below, but let's first look at what fields make up our first Slice example.

In this example, we have two slice options: a text slice and an image gallery slice.

Text slice

This text slice is simple and only contains one Rich text field, which is non-repeatable.

Primary

non-repeatable

- A Rich Text field with the API ID of: example_rich_text

Items

repeatable

None

Image gallery slice

The image_gallery slice contains both a repeatable and a non-repeatable field, each with its own set of fields.

Primary

non-repeatable

- A Title field with the API ID of: name_of_the_gallery

Items

repeatable

- An Image field with the API ID of gallery_image

- A Title field with the API ID of: image_caption

Retrieve the Slices

In this example, we query all documents of the type Page. We need to go to edges > node > body and then use the Union type to get each of the different slices.

💡 Union type Slice Syntax

Note how the syntax of the Slice changes. Look at this example:

... on Prismic$TYPEBody$SLICE

So, $TYPE and $SLICE will change depending on the name of the Custom type and the Slice itself.

Copy
query MyQuery {
  allPrismicPage {
    edges {
      node {
        data {
          body {
            ... on PrismicPageBodyImageGallery {
              slice_label
              slice_type
              primary {
                name_of_the_gallery {
                  raw
                }
              }
              fields {
                gallery_image {
                  url
                  alt
                }
                image_caption {
                  raw
                }
              }
            }
            ... on PrismicPageBodyText {
              slice_label
              slice_type
              primary {
                example_rich_text {
                  raw
                }
              }
            }
          }
        }
      }
    }
  }
}

Aftwards you'll just need to render your result. Check out: Templating Slices here.