DEV Community

Cover image for πŸ”₯ GraphQL Crash Course (in 10 pics!)
Xiaoru Li for The Method Coder

Posted on • Updated on • Originally published at

πŸ”₯ GraphQL Crash Course (in 10 pics!)

Originally posted on Twitter as a thread:

Always wanted to use GraphQL for your new projects, but never got time to learn how it works? πŸ˜ƒ

Let's start the week with some new GraphQL knowledge in hand! πŸ™Œ

πŸ‘‡ Here's a 10-minute GraphQL crash course for you! πŸ₯³

1 - How GraphQL works

GraphQL is a query language for making flexible API calls.

We describe what we want in a single request with nested fields, then we will receive a data payload of the exact shape.

No need to make many small requests to stitch data together or over-fetch unwanted parts!

How GraphQL works

2 - A GraphQL Query Exchange

GraphQL is not a library, but a language spec.

We send structured queries as POST or GET requests. The server checks if they're valid with a predefined schema, runs corresponding resolver functions to perform operations, then prepares the data to be returned to the client.

A GraphQL Query Exchange

3 - The GraphQL Schema

GraphQL schema defines the structure of valid queries and the return data types of them. It's the protocol the client & server use to communicate under.

They're strongly typed, can be nested. In addition to the most common "object" types, the schema also supports unions, enums, interfaces, etc.

There are 3 operation types in GraphQL - query, mutation, or subscription. query is the most commonly used operation.

The GraphQL Schema

4 - Argument

Some queries allow us to pass in arguments in order to eg. filter results. The schema defines all valid arguments.

On the backend, we need to have corresponding resolvers to fulfill those conditioned queries.

NOTE: GraphQL has no builtin comparison operators or functions like > or TOP, LIMIT in SQL! Those additional features must be implemented in the resolvers. Most GraphQL frameworks however already ship with those utility resolvers.


5 - Alias

Sometimes in a query, we select the same field multiple times, but each time with a different argument (like in the pic). This will cause naming conflicts, so we need to assign aliases to the fields.

Aliases can be added to any field.


6 - Fragment

We can wrap "subfields" into a Fragment and reuse them with the spread operator in selections. Useful when we select the same fields over and over again. Think of it as a JS object for GraphQL field names that can be destructured!

The Fragment is sent to the server alongside the main operation in the query field of the HTTP request payload.


7 - Variable

Using GraphQL variables makes it easy to modularize and share/reuse our prewritten query code. We declare them at the beginning of a query, and are allowed to assign default values to them. The variables can be nested, just like a normal JSON object.

Noticed the GraphQL request payload in the pic of section 2 - A GraphQL Query Exchange? This is what the "variables" field is for.


8 - Interface

Interfaces in a GraphQL schema allow us to flexibly create and use complex data types in an OOP manner.

Types can implement (multiple) interfaces.

When the return type is an interface, we can use the on keyword to conditionally access fields of a specific implementation.


9 - Mutation Operation

Contrary to queries, a Mutation operation is used to change the serverside data - eg. to create an account, generate auth token, or add data entries.

Like queries, we can supply arguments to a mutation. The mutation also returns value, so don't forget to select the fields we need!

Mutation Operation

10 - Subscription Operation

Instead of sending queries over HTTP back and forth, GraphQL also has a Subscription operation type for creating WebSocket connections, so the server can push continuous updates to the client.

Particularly useful for real-time apps like πŸ’Ή stock market or πŸ’¬ messaging apps.

Subscription Operation


Online Playgrounds

Many GraphQL frameworks come with a web IDE with autocompletion support and interactive schema lookups like GraphiQL or GraphQL Playground. Make use of them when debugging your queries! ✨

You can also create your own playground online with CodeSandbox by selecting the Apollo GraphQL Server sandbox.

However, if you are as lazy as me πŸ€ͺ, there are also a few zero-config public GraphQL APIs to play with online πŸ‘‰

Additional Resources

There's a great episode on GraphQL from the Ladybug Podcast, do check it out!

I hope you have enjoyed this GraphQL crash course! 😁 Have a great and productive week ahead! πŸ™Œ

(Thread crash course format inspired by @chrisachard 😁 Check out his excellent React/Redux, Git crash courses!)

While you are still here, if you've got 13 more minutes and are interested in learning the new hot framework Svelte, I've also got a crash course with companion videos here πŸ‘‰ Svelte Crash Course πŸ”₯


Like this post?

I'll be posting more on Twitter: @hexrcs
You can also find me at my homepage:

Top comments (23)

monfernape profile image
Usman Khalil

I absolutely loved the way you explained. Bring more

hexrcs profile image
Xiaoru Li

Thanks! 😁 More coming soon!

tvogunleye profile image
Ogunleye Victor T.

The Explanation made GraphQL so simple. Please more.

shadid12 profile image
Shadid Haque

what tools have you used to make those interactive code snippets? Share please :)

hexrcs profile image
Xiaoru Li

Which code snippets are you referring to? (There are no interactive snippets in the post, maybe you are mistaken?)

shadid12 profile image
Shadid Haque

I was wondering about those pictures. What software you used to make them.

Thread Thread
hexrcs profile image
Xiaoru Li

I used Figma.

cecilelebleu profile image
CΓ©cile Lebleu

I didn’t get graphQL. Now I do.
Keep posting!

hexrcs profile image
Xiaoru Li

Glad to hear that! πŸ˜„

dbarrous profile image
Damian Barrous Dume

Very great crash course, thank you!

rebaiahmed profile image
Ahmed Rebai

Nice Introduction and easy explication, Good Job :D

thejsonorg profile image

Wow... it's amazing and easy to understand tutorial, well i also came across for beautifying GraphQL Query string.

@hexrcs glade to read this article..

jgilbertcastro profile image
Jesus Gilbert

Awesome! excellent explanation

tucq88 profile image
Tu Chu

Great series mate. Keep it up!

thompcd profile image
Corey Thompson

Great stuff, thank you very much!

davestewart profile image
Dave Stewart

The most useful dev post I've read this year! Thank you!

hexrcs profile image
Xiaoru Li

I'm flattered to hear that! Glad that you found it useful! 😁

stangkaaipean profile image

Awesome! Thank you.

ayatmaulana profile image
Ayat Maulana

thankyou πŸ‘Œ

rvnovaes profile image
Roberto Vasconcelos Novaes

Excellent! Congrats!

kyle_stratis profile image
Kyle Stratis

Excellent crash course, and I loved the examples!

isajal07 profile image
Sajal Shrestha

I just finished a crash course on GraphQL, and after studying this article I am more clear. Xièxiè, Xiaoru. 😁