This site runs best with JavaScript enabled.

Speaking the GraphQL Query Language

Last tended on July 30, 2019
🌱 Evergreen


Small GraphQL schema dictionary illustration

GraphQL 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

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 requestsA 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 queryWe 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

Want to share?

Join the newsletter

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

Maggie Appleton © 2020