Always wanted to use #GraphQL for your new projects, but never got time to learn how it works? 😃
Let's change that this weekend! 🙌
👇 Here's a 10-tweet GraphQL crash course for you! 🥳
Let's change that this weekend! 🙌
👇 Here's a 10-tweet GraphQL crash course for you! 🥳
1/10
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!
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/10
GraphQL is not a library, but a language spec.
We send 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.
GraphQL is not a library, but a language spec.
We send 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/10
GraphQL Schema defines the structure of valid queries, and return data types of them. It's the protocol the client & server use to communicate under.
They're strongly typed, can be nested, and support unions, enums, interfaces, etc.
`query` is the most used operation type.
GraphQL Schema defines the structure of valid queries, and return data types of them. It's the protocol the client & server use to communicate under.
They're strongly typed, can be nested, and support unions, enums, interfaces, etc.
`query` is the most used operation type.
4/10
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
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
5/10
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.
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/10
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.
The Fragment is sent to the server alongside the main query.
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.
The Fragment is sent to the server alongside the main query.
7/10
GraphQL variable 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.
Noticed the GraphQL request payload in 2/10? This is what the "variables" field is for.
GraphQL variable 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.
Noticed the GraphQL request payload in 2/10? This is what the "variables" field is for.
8/10
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.
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/10
Contrary to queries, a Mutation operation is used to change the serverside data - eg. to create account, generate auth token, or add data entries.
Like queries, we can supply arguments to a mutation. Mutation also returns value, so don't forget to select the fields we need!
Contrary to queries, a Mutation operation is used to change the serverside data - eg. to create account, generate auth token, or add data entries.
Like queries, we can supply arguments to a mutation. Mutation also returns value, so don't forget to select the fields we need!
10/10
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💬
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💬
BONUS2/10
You can also create your own playground online with @codesandbox (Apollo + GraphQL Server)
If you are as lazy as me🤪, there are also a few public GraphQL APIs to play with online👉 apis.guru/graphql-apis/
You can also create your own playground online with @codesandbox (Apollo + GraphQL Server)
If you are as lazy as me🤪, there are also a few public GraphQL APIs to play with online👉 apis.guru/graphql-apis/
BONUS3/10
There's a great episode on GraphQL from @ladybugpodcast, do check it out!👉 ladybug.dev/episode/what-t…
I'd also like to mention the format of this thread is inspired by @chrisachard. Highly recommend his threads on Git, React hooks, DNS - check them out and follow him! ✨
There's a great episode on GraphQL from @ladybugpodcast, do check it out!👉 ladybug.dev/episode/what-t…
I'd also like to mention the format of this thread is inspired by @chrisachard. Highly recommend his threads on Git, React hooks, DNS - check them out and follow him! ✨
I hope you have enjoyed this #GraphQL crash course! 😁 Have a great weekend ahead! 🙌
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 (@methodcoder) 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 (@methodcoder) here 👉
@MethodCoder There's a typo in the 3rd pic - it should be "scalar" instead of "scaler"!
