graphql fragments

Recently, I listened to a conversation on the Modern Web Podcast about GraphQL in 2019

When it comes to understanding GraphQL, several of the panelists referenced the talk Lee Byron gave at Full Stack Fest 2016 on Immutable User Interfaces.

The talk is a great primer on why we have GraphQL and how it solves some of the problems inherent with MVC/REST - particularly around latency.

The best part for me, however, was around colocated data dependencies (~18 minute mark) - in particular the use of fragments to define collections of data that are often required together and help to address overfetching.

An example from Lee’s slides:

{
  event(id: 1234) {
    ...attendeeLIst
  }
}

fragment attendeeList on Event {
  attendees {
    ...personRow
  }
}

fragment personRow on User {
  ...profilePic
  name
  isFriend
}

fragment profilePic on User {
  profilePicture {
    width
    height
    url
  }
}

Plenty more to learn about how to best use Fragments, but at least I now know they exist!

Resources

• Apollo Docs on Using Fragments