What is gatsbyContentfulFluid?

Question

I'm learning Gatsby and GraphQL as a newbie and following this article https://ibaslogic.com/gatsby-with-contentful-cms/

It has this code:

export const query = graphql`
  query($slug: String!) {
    contentfulBlogPost(slug: { eq: $slug }) {
      title
      publishedDate(formatString: "Do MMMM, YYYY")
      featuredImage {
        fluid(maxWidth: 750) {
          ...GatsbyContentfulFluid
        }
      }
    }
  }
`

I'm getting everything but not getting ...GatsbyContentfulFluid on my GraphQL query server. C an someone please explain what ...GatsbyContentfulFluid is? Why we are using it with a spread operator? and did I miss something while creating Contentful data that's why I'm not getting ...GatsbyContentfulFluid in my GQL query playground?

Answer 1

It's not a spread operator like we know it in JavaScript, in GraphQL stands for a query fragment.

A fragment's a way of querying a set of fields using reusable units. From GraphQL docs:

Let's say we had a relatively complicated page in our app, which lets us look at two heroes side by side, along with their friends. You can imagine that such a query could quickly get complicated, because we would need to repeat the fields at least once - one for each side of the comparison.

That's why GraphQL includes reusable units called fragments. Fragments let you construct sets of fields, and then include them in queries where you need to. Here's an example of how you could solve the above situation using fragments:

In your case, the fragment is provided by gatsby-source-contentful and basically, is querying a fluid asset from Contentful, as you do normally when using gatsby-image for local files.

In other words, with ...GatsbyContentfulFluid fragment you are fetching the mandatory fields from Contentful assets that allow you to use a gatsby-image within the asset.

Fragments are not available in the GraphQL playground due to a limitation of the GraphiQL:

Note, due to a limitation of GraphiQL, you can not currently use these fragments in the GraphiQL IDE.

So, you can use fragments (indeed, you should) but you will need to check your fetched data in your code (via console.logs or via debug breakpoints) directly since they are not available in the GraphQL playground.