13th January 2022

GraphQl: How Not To Repeat Queries

In this post, I am going to write about what a fragment is in GraphQL. A GraphQL fragment is a reusable part of the query. In GraphQL, you may run into situations where you need to query for the same fields in different queries. If you notice that your query has many repetitive fields in multiple areas, you can consolidate them into a reusable unit called a fragment.

I am still learning about GraphQl and the information that I am currently providing in this post might not inclue all the use cases of a fragment in GraphQl

The structure of a GraphQl Fragment

fragment Name on TypeName {
  field_key_1
  field_key_2
  field_key_3
}

A fragment consists of three unique components:

• Name: This the name of the fragment it should be unique otherwise you might see some errors
• Type Name: The type of object where the fragment gonna be used on
• Body: This is the part that you are repeating much in your queries

Example of using a GraphQl Fragment

Before using the GraphQl Fragment on of my site query looked like the following:

    query HomePageQuery {
        rioThereImage: file(relativePath: {eq: "projects/riothere.com.png"}) {
            childImageSharp {
                gatsbyImageData(
                    formats: WEBP
                    placeholder: BLURRED
                    quality: 100
                    webpOptions: {quality: 100}
                    breakpoints: [500, 767, 1200]
                )
            }
        }
        concertForAfghanistanImage: file(
            relativePath: {eq: "projects/concertforafghanistan.com.png"}
        ) {
            childImageSharp {
                gatsbyImageData(
                    formats: WEBP
                    placeholder: BLURRED
                    quality: 100
                    webpOptions: {quality: 100}
                    breakpoints: [500, 767, 1200]
                )
            }
        }
        abouHannaImage: file(relativePath: {eq: "projects/abouhanna.com.png"}) {
            childImageSharp {
                gatsbyImageData(
                    formats: WEBP
                    placeholder: BLURRED
                    quality: 100
                    webpOptions: {quality: 100}
                    breakpoints: [500, 767, 1200]
                )
            }
        }
        MMFDImage: file(relativePath: {eq: "projects/mmfidawla.com.png"}) {
            childImageSharp {
                gatsbyImageData(
                    formats: WEBP
                    placeholder: BLURRED
                    quality: 100
                    webpOptions: {quality: 100}
                    breakpoints: [500, 767, 1200]
                )
            }
        }
        CodeBraveTutorsImage: file(relativePath: {eq: "projects/codebravetutors.org.png"}) {
            childImageSharp {
                gatsbyImageData(
                    formats: WEBP
                    placeholder: BLURRED
                    quality: 100
                    webpOptions: {quality: 100}
                    breakpoints: [500, 767, 1200]
                )
            }
        }
        GarderLeCapImage: file(relativePath: {eq: "projects/garderlecap.global.png"}) {
                       childImageSharp {
                gatsbyImageData(
                    formats: WEBP
                    placeholder: BLURRED
                    quality: 100
                    webpOptions: {quality: 100}
                    breakpoints: [500, 767, 1200]
                )
            }
        }
        ...
    }

And after implementing GraphQl Fragment my query looked like the following:

    fragment FileChildImageSharp on File {
        childImageSharp {
            gatsbyImageData(
                formats: WEBP
                placeholder: BLURRED
                quality: 100
                webpOptions: {quality: 100}
                breakpoints: [500, 767, 1200]
            )
        }
    }

    query HomePageQuery {
        rioThereImage: file(relativePath: {eq: "projects/riothere.com.png"}) {
            ...FileChildImageSharp
        }
        concertForAfghanistanImage: file(
            relativePath: {eq: "projects/concertforafghanistan.com.png"}
        ) {
            ...FileChildImageSharp
        }
        abouHannaImage: file(relativePath: {eq: "projects/abouhanna.com.png"}) {
            ...FileChildImageSharp
        }
        MMFDImage: file(relativePath: {eq: "projects/mmfidawla.com.png"}) {
            ...FileChildImageSharp
        }
        CodeBraveTutorsImage: file(relativePath: {eq: "projects/codebravetutors.org.png"}) {
            ...FileChildImageSharp
        }
        GarderLeCapImage: file(relativePath: {eq: "projects/garderlecap.global.png"}) {
            ...FileChildImageSharp
        }
        CodiTechImage: file(relativePath: {eq: "projects/codi.tech.png"}) {
            ...FileChildImageSharp
        }
        SummerOfInnovationImage: file(relativePath: {eq: "projects/summerofinnovation.io.png"}) {
            ...FileChildImageSharp
        }
        NextgenLondonImage: file(relativePath: {eq: "projects/nextgenlondon.com.png"}) {
            ...FileChildImageSharp
        }
    }

As you can see the code got a lot shorter and if later on I want to modify a field inside the body fragment I would not have the need to change every query code.