Rendering the Group Field

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 Group field is used to create a repeatable collection of fields. Refer to our User Guides to learn more about the Group field.

Example 1 - Reference List

Here is an example that shows you how to retrieve and render a list of links within a Group field.

In this case, the Group field has an API ID of references. The group contains two fields, a Link field with the API ID of link and a Key Text field with an API ID of label.

Copy
import React from "react"
import { graphql } from "gatsby"

const ReferencePage = ({ data }) => {
  const prismicContent = data.prismic.allPages.edges[0]
  if (!prismicContent) return null
  const document = doc.node

  return (
    <>
      <h1>References</h1>
      <ul>
        {document.references.map((reference, index) => (
          <li key={`reference-${index}`}>
            <a href={reference.link.url}>{reference.label}</a>
          </li>
        ))}
      </ul>
    </>
  )
}

export const query = graphql`
{
  prismic {
    allPages(uid: "reference-page", lang: "en-us") {
      edges {
        node {
          references {
            link {
              _linkType
              ... on PRISMIC__ExternalLink {
                url
              }
            }
            label
          }
        }
      }
    }
  }
}
`

export default ReferencePage

You can refer to our other documentation pages to learn more about how to retrieve a Link field, render a Link field, and render a Key Text field.

Here's another example that shows how to retrieve a group of images (e.g. a photo gallery) from a repeatable Group field.

In this case, the Group field has the API ID of photo_gallery. The group contains two fields, an Image field with the API ID of photo and a Key Text field with the API ID of caption.

Copy
import React from "react"
import { graphql } from "gatsby"

const GalleryPage = ({ data }) => {
  const prismicContent = data.prismic.allPages.edges[0]
  if (!prismicContent) return null
  const document = doc.node

  return (
    <>
      <h1>Photo Gallery</h1>
      {document.photo_gallery.map((galleryItem, index) => (
        <figure key={`gallery-item-${index}`}>
          <img src={galleryItem.photo.url} alt={galleryItem.photo.alt} />
          <figcaption>{galleryItem.caption}</figcaption>
        </figure>
      ))}
    </>
  )
}

export const query = graphql`
{
  prismic {
    allPages(uid: "gallery-page", lang: "en-us") {
      edges {
        node {
          photo_gallery {
            photo
            caption
          }
        }
      }
    }
  }
}
`

export default GalleryPage

You can refer to our other documentation pages to learn more about how to render an Image field and render a Key Text field.