Quick Tip: GraphQL Fragments in Gatsby
Tags: react, graphql, gatsby, typescript
Published: 2020-01-04 05:25:44

---
title: Quick Tip: GraphQL Fragments in Gatsby
published: true
date: 2019-09-09 00:00:00 UTC
tags: react, graphql, gatsby, typescript
canonical_url: https://joelmturner.com/blog/quick-tip-graphql-fragments
description: Some helpful graphql fragment tips for Gatsbyjs and beyond.
cover_image: https://joelmturner.com/static/36ca592e50714ae4c739d73b3533f200/cefe4/graphql-fragments.webp
---

GraphQL makes it easy to get exactly the data we need for a given component. There are many times when we end up using the same query or part of a query in multiple places. This is where [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) can help us.

To declare a fragment we can add `fragment MyAwesomeFragment on BlogPost`. The keyword `fragment` tells GraphQL that we're creating the fragment with the name, `MyAwesomeFragment`. And all of this is on the type `BlogPost`. 

On [joelmturner.com](https://joelmturner.com), I have a few different places where I'm querying images for galleries. So instead of repeating the whole query in every variation across the site I can create a queries file and drop the repeated parts in there. Here's an example of that in action.

```graphql
fragment InstaNodes on InstagramContentEdge {
  node {
    id
    localImage {
      childImageSharp {
        fluid(maxWidth: 1248, maxHeight: 1248) {
          ...GatsbyImageSharpFluid
        }
      }
    }
    images {
      standard_resolution {
        width
        height
        url
      }
    }
  }
}
```

Then we can use them in our components with a page query or static query.

```jsx
const data = useStaticQuery(graphql`
  query {
    allInstagramContent(
      filter: { tags: { glob: "ink*2017" } },
      sort: { fields: created_time, order: ASC }) {
        edges {
          ...InstaNodes
        }
    }
  }
`)
```

## Typing

If you're using TypeScript you can also drop the types for the fragments in the queries file so they're all together.

```typescript
type IInstaNodes = {
  node: {
    id: string;
    localImage: {
      childImageSharp: {
        fluid: FluidObject;
      }
    }
    images: {
      standard_resolution: {
        width: number;
        height: number;
        url: string;
      }
    }
  }
}
```

## Bonus

Add an alias if you're doing similar top-level requests. Here's an example of my Instagram requests.

```graphql
fragment inktober2017 on Query {
  inktober2017: allInstagramContent(
    filter: { tags: { glob: "ink*2017" } }
    sort: { fields: created_time, order: ASC } ) {
      edges {
        ...InstaNodes
      }
  }
}
fragment inktober2018 on Query {
  inktober2018: allInstagramContent(
    filter: { tags: { glob: "ink*2018" } }
    sort: { fields: created_time, order: ASC } ) {
      edges {
        ...InstaNodes
      }
  }
}
fragment letterClash on Query {
  letterClash: allInstagramContent(
    filter: { tags: { eq: "letterclash" } }
    sort: { fields: created_time, order: ASC } ) {
      edges {
        ...InstaNodes
      }
  }
}
```
Now we can grab that data like this:

```js
const {
    inktober2017: { edges: ink2017Edges = [] } = {},
    inktober2018: { edges: ink2018Edges = [] } = {},
    letterClash: { edges: letterClashEdges = [] } = {},
  } = data
```

You can see the result of this on my [illustration page](https://joelmturner.com/illustration). Are you using graphql fragments or aliases? If so, how are they working for you?