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.

1. Specify the Slice Zone field

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.

Copy

query{
  allBlog_posts{
    edges{
      node{
        body{
          __typename
        }
      }
    }
  }
}

2. Add a switch for the Slices

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".

Copy

query{
  allBlog_posts{
    edges{
      node{
        body{
          ... on Blog_postBodyPost_text{
          }
          ... on Blog_postBodyImage_gallery{
          }
          __typename
        }
      }
    }
  }
}

3. Add the fields you need

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.

Copy

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
        }
      }
    }
  }
}

A full example

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.

FAQ slice

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"

Featured Items slice

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"

Text slice

The "text" slice only contains a Rich Text field in the non-repeatable section.

Non-repeatable

primary

A Rich Text field with the API ID of "rich_text"

Repeatable

fields

None

Query

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".

Copy

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
        }
      }
    }
  }
}