Fragments

Here we will discuss Fragments and how you can use them in your Prismic + Gatsby project.


What are Fragments?

Fragments are an easy way to reuse parts of a GraphQL query and break your complex queries down into smaller, more understandable ones, making them unique to a particular component's code. Slice components and the Slice Zone are great examples of where fragments can really shine.

Here is a fragment that will retrieve content from a document of the type Author.

Copy
fragment AuthorInfo on prismicAuthor {
  data {
    example_author_name {
      raw
    }
    example_author_image {
      url
      alt
    }
  }
}

A fragment consists of three pieces:

  1. AuthorInfo - This is the name of the fragment used as a reference, as shown in the next section. This can be whatever name makes the most sense for your collection of fields.
  2. prismicAuthor - This is a specific GraphQL type required to match the type of document you're looking for. This is to make sure that your query is valid and that the fields you are trying to receive actually exist on the object.
  3. example_author_name and example_author_image inside data - The last piece is the fields that you include in your fragment. This will look and work just like the body of a normal query. You can define any fields for the given type and have multiple levels of nesting. In our case above, we are retrieving two fields with information about the author.

Using fragments in your project

Let's take a look at what this might look like in your Gatsby project. Continuing our example above, here's a component that will display some author information on a page.

Copy
// src/components/author.js
import React from 'react'
import { graphql } from 'gatsby'
import { RichText } from 'prismic-reactjs'

const Author = ({ author_name, author_image }) => {
  return (
    <>
      <RichText render={example_author_name.raw} />
      <img src={example_author_image.url} alt={example_author_image.alt} />
    </>
  )
}

export const query = graphql`
fragment AuthorInfo on PrismicAuthor {
  data {
    example_author_name {
      raw
    }
    example_author_image {
      url
      alt
    }
  }
}
`

export default Author

Now let's import this Author component and fragment into our Page component. When you import the Author component, you'll be able to use the fragment in the GraphQL query. Please take a look at how we include the AuthorInfo fragment below.

Copy
// src/pages/page.js
import React from 'react'
import { graphql } from 'gatsby'
import { RichText } from 'prismic-reactjs'
import Author from '../components/author'

const Page = ({ data }) => {
  const page = data.prismicPage.data
  const author = data.prismicAuthor.data

  return (
    <>
      <RichText render={page.example_title.raw} />
      <Author
        author_name={example_author.author_name}
        author_image={example_author.author_image}
      />
      <RichText render={page.example_description.raw} />
    </>
  )
}

export const query = graphql`
query MyQuery {
  prismicPage {
    data {
      example_title {
        raw
      }
      example_desciption {
        raw
      }
    }
  }
  prismicAuthor {
    ...AuthorInfo
  }
}
`

export default Page

Gatsby & GraphQL is smart enough to know what the AuthorInfo fragment is and will include those fields in the main query.

More resources

If you want to learn more about Fragments, here are some more resources for you to explore:


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.