Templating Slices

Slices are repeatable, rearrangeable content sections used to define a dynamic repeatable zone for richer page layouts.


šŸ•™ Before Reading

This article assumes that you have queried your API and saved the document object in a variable namedĀ document.

If this isn't the case, learn how to Retrieve the response here.

Access the Slice response

Slices are found in the body section of your document query response:

Copy
{
  "data":{
    "allPrismicPage":{
      "edges":[
        {
          "node":{
            "data":{
              "body":[
                {
                  "slice_type":"example_image_slice",
                  "primary":{
                    "example_image":{
                      "alt":"Productivity in the workplace",
                      "url":"https://images.prismic.io/repo/a1cdd5"
                    }
                  }
                },
                {
                  "slice_type":"example_text_slice",
                  "primary":{
                    "example_title":{
                      "raw":[
                        {
                          "type":"paragraph",
                          "text":"The future is here.",
                          "spans":[]
                        }
                      ]
                    }
                  }
                }
              ]
            }
          }
        }
      ]
    }
  }
}

Template Slices

After retrieving the response, iterate over the Slices in your document to match them with the 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 and then iterate over each slice 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 pageContent = data.prismicPage.data

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

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

const SliceZone = ({ slices }) => {
  const sliceComponents = {
    example_image_component: ExampleImageComponent,
    example_text_component: ExampleTextComponent,
  }

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

export default SliceZone

Slices or Groups

Slices and Groups both allow you to create repeatable content templates. 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.

These are similar in that they're both iterable fields, but they're also different in an important way. Slices have variable content.

Slices = Components

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. To learn more, see the user guides: Slices.