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!
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.
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.
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!
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.
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
Top comments (23)
I absolutely loved the way you explained. Bring more
Thanks! 😁 More coming soon!
The Explanation made GraphQL so simple. Please more.
what tools have you used to make those interactive code snippets? Share please :)
Which code snippets are you referring to? (There are no interactive snippets in the post, maybe you are mistaken?)
I was wondering about those pictures. What software you used to make them.
I used Figma.
I didn’t get graphQL. Now I do.
Keep posting!
Glad to hear that! 😄
Very great crash course, thank you!
Nice Introduction and easy explication, Good Job :D
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..
Awesome! excellent explanation
Great series mate. Keep it up!
Great stuff, thank you very much!
The most useful dev post I've read this year! Thank you!
I'm flattered to hear that! Glad that you found it useful! 😁