Retrieve Slice content

Prismic no longer recommends the gatsby-source-prismic-graphql plugin

With recent changes to Gatsby, Prismic no longer recommends the gatsby-source-prismic-graphql plugin that this documentation uses. Read more about the future of Prismic and Gatsby. We highly recommend using the gatsby-source-prismic instead. The documentation for this plugin can be found in the plugin's github README.

We will leave this documentation here for now, but will change it in the future when we determine the best approach for Prismic & Gatsby.

The Slices Zone is used to define a dynamic field for richer page layouts. Inside these fields you can then add other Prismic fields, except for Group fields.

When retrieving a Slice Zone using GraphQL, we need to use the Union type 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 will be in our first example.

Example 1

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

Text slice

The "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 "rich_text"

Items

repeatable

None

The "image_gallery" slice contains both a repeatable and a non-repeatable field.

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"

Integration

In the example below we will first query a document using the page type with the UID of test-page, we also use the Union type as mentioned above for the different slices. In this case, the Slice zone has the API ID of body.

Copy
query {
   prismic {
    allPages(uid: "test-page") {
      edges {
        node {
          body {
            ... on PRISMIC_PageBodyImage_gallery {
              type
              label
              primary {
                name_of_the_gallery
              }
              fields {
                gallery_image
                image_caption
              }
            }
            ... on PRISMIC_PageBodyText {
              type
              label
              primary {
                rich_text
              }
            }
          }
        }
      }
    }
  }
}

Example 2

The following is a more advanced example that shows how to use Slices for a landing page. In this example, the Slice choices are FAQ question/answers, featured items, and text sections.

FAQ slice

The "faq" slice is takes advantage of both the repeatable and non-repeatable slice sections.

Primary

non-repeatable

- A Title field with the API ID of "faq_title"

Items

repeatable

- A Title field with the API ID of "question"

- A Rich Text field with the API ID of "answer"

The "featured_items" slice contains a repeatable set of an image, title, and summary fields.

Primary

non-repeatable

None

Items

repeatable

- An Image field with the API ID of "image"

- A Title field with the API ID of "title"

- A Rich Text field with the API ID of "summary"

Text slice

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

Primary

non-repeatable

- A Rich Text field with the API ID of "text"

Items

repeatable

None

Integration

Again in the example below we query a document using the page type with the UID of test-page, we again use the Union type for the different slices and once again the Slice object has the API ID of body.

Copy
query {
   prismic {
    allPages(uid: "test-page") {
      edges {
        node {
          _linkType
          body {
            ... on PRISMIC_PageBodyText {
              type
              label
              primary {
                text
              }
            }
            ... on PRISMIC_PageBodyFaq {
              type
              label
              fields {
                answer
                question
              }
              primary {
                faq_title
              }
            }
            ... on PRISMIC_PageBodyFeatured_items {
              type
              label
              fields {
                image
                title
                summary
              }
            }
          }
        }
      }
    }
  }
}

Hopefully this makes using slices a bit more clear. Check out how to render slices here.