Notes

evergreen

Speaking the GraphQL Query Language

Illustrated notes on the basics of the GraphQL query language

Planted over 5 years ago

G raphQL is undoubtedly one of the popular kids on the Web Development playground right now. If you haven’t heard of GraphQL, the TLDR is that it’s a new way to request data from an API. If you’re unsure what an API is, head on over to my illustrated article on WTF is an API? One that’s easier, faster, better, and stronger than the old RESTful API system

Small GraphQL schema dictionary illustration

If you’re lucky enough to already grok GraphQL, you’ll know the QL stands for Query Language – aka. the language we talk to our GraphQL API in.

It’s not a terribly complex language, but you’ll still need to do some syntax studying to get the hang of it.

Thankfully the magnificent Eve Porcello made an egghead course that runs you through the full GraphQL vocabulary.

Course illustration of a set of dictionary books with the word 'schema' across them

It’s a wonderful introduction for anyone new to the GraphQL ecosystem – Eve explains all the parts of the playground interface that are not in the least bit intuitive. I’d been stumbling about in my own GraphQL queries lost and afraid until I worked through this.

Anyways, as usual I drew some things:

How to talk to a GraphQL API. We can use the graphQL playground to send queries to a GraphQL endpoint. The playground lets us explore our data before making any requests
A query is a request for data. We open it with the query keyword and a set of curly braces. Curly braces wrap around a selection and say go look inside this object. Blank spaces at the end of a line are fields that say I want his data please. We can also add the 'total' and 'all' keywords in front of any list of objects.
Inside the playground, ctrl + space is a magic combination that reveals all the available fields of a query
We can filter our data by adding arguments to our queries. This means we only get the data we want. We can also use mutations to change the data. This includes creating, updating, and deleting data.
The full GraphQL query language illustrated note

Bonus Poster

Twitter kept bugging me to make prints out of these illustrated notes, so this one is now purchaseable as a real life object on the egghead store .

There’s framed versions and unframed, depending on how fancy you feel. You can buy one here if you so desire.

a framed graphql illustrated print
a close-up image of one section of the print

Want more illustrated notes on web development?

Take a look at A Fresh Serving of JavaScript ES2019 , The JAMStack, Gatsby & Contentful or Essential Web Security Tactics

4 Backlinks

The Art and Craft of Gatsby Themes

Illustrated notes on building Gatsby themes

The JAMStack, Gatsby & Contentful

Illustrated notes on the JAMstack, Gatsby & Contentful

Building VR Apps with React360

Illustrated notes on building VR web apps with React360

Instachatting with Vue & Socket.io

Illustrated notes on how to implement web sockets with Vue.js and Socket.io