Retrieve Slices
This article shows you how to set up your Gatsby query to retrieve Slice Zone content from your Prismic repository.
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.
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
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
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.
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.