Template Slices

Learn how to template your document's Slices in your Gatsby project. Slices are repeatable, rearrangeable content sections used to define a dynamic repeatable zone for richer page layouts.


ūüēô Before reading

This page assumes that you have saved the response of your queries in a variable named document and that you've already installed the prismic-reactjs library. You'll use this library to import helper components into your templates.

Slices in the response

By default, the Slices of your documents are found in the body section of the response object. The repeatable zone is found inside the items node and the non-repeatable zone inside the primary node.

Here's a truncated example response of a single document with one Slice with the API ID of Quote:

Copy
{
  "data": {
    "prismicHomepage": {
      "data": {
        "body": [
          {
            "slice_type": "quote",
            "primary": {
              "quote": {
                "raw": [
                  {
                    "type": "paragraph",
                    "text": "Praesent elementum hendrerit tortor",
                    "spans": []
                  }
                ]
              }
            },
            "items": [
              {
                "content_paragraph": {
                  "text": "Sed egestas, ante et vulputate volutpat, eros pede semper est."
                }
              },
              {
                "content_paragraph": {
                  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
                }
              }
            ]
          }
        ]
      }
    }
  }
}

Template Slices

After retrieving the response, the best way to template the Slices is to create separated components, one per Slice. And a Slice Zone function or component that will iterate over the response and match the Slices with their corresponding components.

In the following example, we retrieve the Slices in the Page query and pass them to the <SliceZone /> component in Page.js. Then, in the SliceZone.js component, we import each dedicated Slice component, in this case, ImageGallery and Quote.

We iterate over each Slice and pass them props to render the correct one:

  • Page.js
  • SliceZone.js
Copy
import React from 'react'
import { graphql } from 'gatsby'
import { SliceZone } from '../components/SliceZone'

export const PageTemplate = ({ data }) => {
  if (!data) return null
  const document = data.prismicPage

  return (
    <div>
      <SliceZone slices={document.data.body} />
    </div>
  )
}

export const query = graphql`
  query pageQuery($uid: String) {
    prismicPage(uid: { eq: $uid }) {
      data {
        body {
          ... on PrismicPageDataBodyImageGallery {
            slice_type
            primary {
              example_image {
                alt
                url
              }
            }
          }
          ... on PrismicPageDataBodyQuote {
            slice_type
            primary {
              example_title {
                raw
              }
            }
          }
        }
      }
    }
  }
`
export default PageTemplate
Copy
import React from 'react'
import { ImageGallery } from '../slices/ImageGallery'
import { Quote } from '../slices/Quote'

export const SliceZone = ({ slices }) => {
  const sliceComponents = {
    image_gallery: ImageGallery,
    quote: Quote,
  }

  return slices.map((slice, index) => {
    const SliceComponent = sliceComponents[slice.slice_type]
    if (SliceComponent) {
      return <SliceComponent slice={slice} key={`slice-${index}`} />
    }
    return null
  })
}

Slices vs. Groups

Slices and Groups both allow you to create repeatable content templates. The Groups are available in your document's main section, and Slices are available in the Slice Zone. Groups and Slices' difference is that Groups can only be repeated, while Slices can be repeated, rearranged, and used separately. They are more flexible. Think of them as components in your code.

It's important to note that Slices cannot have "Group" fields. Every Slice has a "non-repeatable" and "repeatable" section, and the repeatable section functions just like a Group field.


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.