DEV Community

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

Posted on • Updated on • Originally published at twitter.com

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

Originally posted on Twitter as a thread: https://twitter.com/hexrcs/status/1190332090149150720

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.

Arguments

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.

Alias

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.

Fragment

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.

Variable

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.

Interface

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

BONUS

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 πŸ‘‰ https://apis.guru/graphql-apis/

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: xiaoru.li

Latest comments (23)

Collapse
 
moatazabdalmageed profile image
Moataz Mohammady

Thanks for this amazing tutorial ,you are talented teacher !

Collapse
 
thejsonorg profile image
theJSON

Wow... it's amazing and easy to understand tutorial, well i also came across jsonformatter.org/graphql-formatter for beautifying GraphQL Query string.

@hexrcs glade to read this article..

Collapse
 
rvnovaes profile image
Roberto Vasconcelos Novaes

Excellent! Congrats!

Collapse
 
kyle_stratis profile image
Kyle Stratis

Excellent crash course, and I loved the examples!

Collapse
 
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. 😁

Collapse
 
rebaiahmed profile image
Ahmed Rebai

Nice Introduction and easy explication, Good Job :D

Collapse
 
cecilelebleu profile image
CΓ©cile Lebleu

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

Collapse
 
hexrcs profile image
Xiaoru Li

Glad to hear that! πŸ˜„

Collapse
 
shadid12 profile image
Shadid Haque

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

Collapse
 
hexrcs profile image
Xiaoru Li

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

Collapse
 
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.

Collapse
 
stangkaaipean profile image
DevSatang

Awesome! Thank you.

Collapse
 
jgilbertcastro profile image
Jesus Gilbert

Awesome! excellent explanation

Collapse
 
ayatmaulana profile image
Ayat Maulana

thankyou πŸ‘Œ

Collapse
 
tucq88 profile image
Tu Chu

Great series mate. Keep it up!

Collapse
 
thompcd profile image
Corey Thompson

Great stuff, thank you very much!

Collapse
 
davestewart profile image
Dave Stewart

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

Collapse
 
hexrcs profile image
Xiaoru Li

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

Collapse
 
dbarrous profile image
Damian Barrous Dume

Very great crash course, thank you!