Retrieve Slice content
You can use Prismic's Slices feature to define a dynamic zone for richer page layouts. This page will show you how to retrieve the content from your Slice Zone.
Start by defining the Slice zone you want to retrieve.
In the following example, we are querying for all the documents of the type "blog_post". In this case, the API ID of the Slice Zone is "body". We are also specifying the __typename field so that we can see the field names we need to use in the next step of this process.
query{
allBlog_posts{
edges{
node{
body{
__typename
}
}
}
}
}
Next we need to add a Union type in order to specify which fields we need for each Slice type. The Union type will look like this:
... on Blog_postBodyPost_text
As you can see you need to specify the Custom Type (blog_post), the Slice Zone (body), then the Slice type (post_text). Here is an example that will switch over two different slice types: "post_text" and "image_gallery".
query{
allBlog_posts{
edges{
node{
body{
... on Blog_postBodyPost_text{
}
... on Blog_postBodyImage_gallery{
}
__typename
}
}
}
}
}
Next you need to add the fields that you need from each Slice type. Any content fields that are in the non-repeatable zone of the slice will be available via the primary field. Any content fields that are in the repeatable zone of the slice will be available via fields.
Let's expand on the example above. For the "post_text" slice, let's retrieve the "rich_text" field from the non-repeatable zone. For the "image_gallery" slice, let's retrieve the "gallery_title" field from the non-repeatable zone, as well as the "photo" and "caption" fields from the repeatable zone.
query{
allBlog_posts{
edges{
node{
body{
... on Blog_postBodyPost_text{
type
primary{
rich_text
}
}
... on Blog_postBodyImage_gallery{
type
primary{
gallery_title
}
fields{
photo
caption
}
}
__typename
}
}
}
}
}
The following example is a bit more advanced and illustrates how to use slices for a landing page. In this example, we'll be using the following slices: FAQ question/answers, featured items, and text sections.
The "faq" slice contains fields both in the repeatable and non-repeatable slice sections.
Non-repeatable
primary
A Title field with the API ID "faq_title"
Repeatable
fields
A Title field with the API ID "question"
A Rich Text field with the API ID "answer"
The "featured_items" slice contains a repeatable group made up of the following fields: an image, a title and a summary.
Non-repeatable
primary
None
Repeatable
fields
An Image field with the API ID "image"
A Title field with the API ID "title"
A Rich Text field with the API ID "summary"
Non-repeatable
primary
A Rich Text field with the API ID of "rich_text"
Repeatable
fields
None
Here is an example which shows how to retrieve these slices when querying for "landing_page" documents. In this case, the Slice Zone has an API ID of "page_content".
query{
allLanding_pages{
edges{
node{
page_content{
... on Landing_pagePage_contentFaq{
type
primary{
faq_title
}
fields{
question
answer
}
}
... on Landing_pagePage_contentFeatured_items{
type
fields{
image
title
summary
}
}
... on Landing_pagePage_contentText{
type
primary{
rich_text
}
}
__typename
}
}
}
}
}