GraphQL Selection Sets

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.

Conclusion

This post, though extremely simple, represents the heart of GraphQL data fetching: the Query, the Selection Set, and the fields that comprise them.

If you want to get started with GraphQL today head on over to this article by Jonas Helfer to learn “How to GraphQL

Check out the Apollo Stack. If you’re using REST APIs and hating your life, check out how our client interface works here.

Ciao

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.