Retrieve Group field 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.

Querying a group field with the Gatsby GraphQL API is pretty straight forward.

The GraphQL query

In the following example we query every document of the 'Page' type and simply pass in the API ID of the group field, which in this case is photo_gallery. We also include the fields within the group, in this case an Image field with the API ID of photo and a Key text field with the API ID of caption.

Copy
query {
  prismic {
    allPages{
      edges{
        node{
          photo_gallery {
            photo
            caption
          }
        }
      }
    }
  }
}

The response

You should then get a response like the one below:

Copy
{
  "data": {
    "prismic": {
      "allPages": {
        "edges": [
          {
            "node": {
              "photo_gallery": null
            }
          },
          {
            "node": {
              "photo_gallery": [
                {
                  "photo": {
                    "dimensions": {
                      "width": 300,
                      "height": 184
                    },
                    "alt": null,
                    "copyright": null,
                    "url": "<https://images.prismic.io/prismic-gatsby-documentations/effaf050-bafc-462a-87a9-e0fdeeee61f5_R2-D2-famous-robot.jpg?auto=compress,format&rect=0,0,1580,969&w=300&h=184>"
                  },
                  "caption": "R2-D2"
                },
                {
                  "photo": {
                    "dimensions": {
                      "width": 300,
                      "height": 376
                    },
                    "alt": null,
                    "copyright": null,
                    "url": "<https://images.prismic.io/prismic-gatsby-documentations/6e49094e-781f-4423-b137-f7a7e307dbc0_bender.png?auto=compress,format&rect=0,0,408,511&w=300&h=376>"
                  },
                  "caption": "Bender"
                },
                {
                  "photo": {
                    "dimensions": {
                      "width": 300,
                      "height": 300
                    },
                    "alt": null,
                    "copyright": null,
                    "url": "<https://images.prismic.io/prismic-gatsby-documentations/bd2f69f4-e299-4035-bf8f-345cba3d59c8_Wall%253Fe_clipped_rev_1.png?auto=compress,format&rect=0,0,360,360&w=300&h=300>"
                  },
                  "caption": "Wall-e"
                }
              ]
            }
          }
        ]
      }
    }
  }
}

In this example we've returned one document with one Group and its fields. In this case, the Group field had three items.

Check out this page, if you want to see how to render your group field in your Gatsby project.