How To Use GraphQL Fragments with React

Jan 21, 2019 · by Tim Kamanin

If you're reading this, probably you know how awesome (or painful) GraphQL is. Since we're all developers here and one of our mantras is DRY (which stands for ... well you know what it means, don't you?) we might cringe a little bit when we see repeating parts in our GraphQL queries.

Consider the following GraphQL query/mutation pair that fetches and updates a product:

javascript

export const GET_PRODUCT = gql`
  query getProduct($id: ID!) {
    product(id: $id) {
      id
      title
      description
      image
      price
    }
  }
`;

javascript

export const UPDATE_PRODUCT = gql`
  mutation productUpdate($product: ProductInput!) {
    productUpdate(input: $product) {
      product {
        id
        title
        description
        image
        price
      }
    }
  }
`;

I guess we both agree there's a repeating part that begs us to get extracted:

javascript

{
  id
  title
  description
  image
  price
}

Fragments to the rescue!

It turns out that GraphQL people are also smart and they had the same awkward feeling. Thus they created a thing that allows us to extract a fragment of a query and re-use it in another query. And they called the thing (drumroll please) Fragments.

Here's how we can define a fragment in JS/React code:

javascript

export const PRODUCT_DETAILS_FRAGMENT = gql`
   fragment ProductDetails on Product {
      id
      title
      description
      image
      price
   }
`

Where

ProductDetails is the name of the fragment, you can call it whatever you want.
on Product is the name of the GraphQL resource and it should match the resource you're trying to query, in our case it's Product.

So now we can simplify our query/mutation pair to:

javascript

export const GET_PRODUCT = gql`
  query getProduct($id: ID!) {
    product(id: $id) {
      ...ProductDetails
    }
  }
  ${PRODUCT_DETAILS_FRAGMENT}
`;

javascript

export const UPDATE_PRODUCT = gql`
  mutation productUpdate($product: ProductInput!) {
    productUpdate(input: $product) {
      product {
        ...ProductDetails
      }
    }
  }
  ${PRODUCT_DETAILS_FRAGMENT}
`;

Please note how we inject our fragment into query/mutation:

We add a fragment to a place where we'd typically describe a product output:
javascript
```
product {
   ...ProductDetails
}
```
Don't miss the ... in front of the ProductDetails.
We inject ${PRODUCT_DETAILS_FRAGMENT} at the end of the query/mutation, so GraphQL knows where to look for a ProductDetails fragment.

And that's all! Now you know this powerful technique to make your GraphQL codebase more DRY and organized. Enjoy and let me know in the comments below if that helped you.