Today let’s talk about Selection Sets in GraphQL. What is this you ask? Well to put it in some simple terms, Selection Sets represent the collection of keys in our query. They are the full “selection” of data that we want to resolve from our server.
Anatomy of a Query
Let’s take a look at a simple query. Imagine we are trying to query a Youtube backend. As a Product Developer I only want to grab 3 fields to render my awesome list of videos. My “Selection Set” here is the group of data representing the title of the video, the description, and the videoId.
When the server resolves this query we’ll get an output I hope you’re familiar with
See! It looks like JSON! We’re at home and in a comfortable place yeah?
To alter the data we get, we can also parameterize our queries.
Remember, our queries select the “set” of information we need. It will get back EXACTLY what we wanted and that’s it. This is why GraphQL is awesome. The days where we receive huge JSON payloads is over. Over-fetching is a problem of the past.
What is in my Selection Set?
So if Selection Sets represent the set of data we are trying to resolve from the server, fields are the heart of our sets. Selection Sets are composed of many fields in which one field describes a specific slice of data we wish to request from the server.
The beauty of GraphQL is that fields themselves can take arguments! Thus, you sort of have a “Mini API” per field.
This way we can specify the exact data needs the whole way down the query.
The data we resolve from our fields can come from anything really. It could come from a complex computation done on the server to output some computed value, or straight from a DB table. The beautiful thing is, who cares where it comes from? Our goal is to build amazing products with data we need to provide amazing user experiences.
This post, though extremely simple, represents the heart of GraphQL data fetching: the Query, the Selection Set, and the fields that comprise them.