This site runs best with JavaScript enabled.

Speaking the GraphQL Query Language

Last tended Jul 30, 2019
Web Development
Illustrated Notes

Small GraphQL schema dictionary illustration

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

One that's easier, faster, better, and stronger than the old

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

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


There's framed versions and unframed, depending on how fancy you feel. You can

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

The JAMStack, Gatsby & Contentful
Essential Web Security Tactics

Linked References

The Art and Craft of Gatsby Themes

More illustrated notes, this time on Gatsby themes . They're one of the newer features in Gatsby.js – little building blocks of site functionality you can mix n' match n' share on NPM. Chris…

The JAMStack, Gatsby & Contentful

If you've been keeping up with the sweetest new static-site generation tools, you'll have heard of the JAMstack. And if you havent, don't worry it's a niche web developer thing - Jamstack WTF…

Building VR Apps with React360

Turns out you can build almost anything in React now... including VR and AR apps inside a web browser. There's a version of React called React 360 that simplifies the otherwise niche and overly…

Instachatting with Vue &

The intantness of chat apps has always been a mystery to me. The technical details of moving emojis through The Internet Pipes and across continents in 0.004 miliseconds is well beyond my paygrade…

Want to share?

Join the newsletter

For weekly notes on visual thinking, ethical technology, and cultural anthropology.

Maggie Appleton © 2021