GraphQL for beginners with JavaScript
Obviously, you should use the right tool for the job, right? ... but often, what was the “right” tool, becomes the inferior tool, and frequently you don't even notice... The most popular way of talking to servers today, is using REST. REST offers a nice, easy to understand way of interacting with other servers, but think about this: Rest was introduced about 2 decades ago… That’s a long time in our world! Let me ask you a question: how much has software development changed in 2 decades? Heck, how much has software development changed in 2 years? A LOT!
More
So, I think it’s fair to ask the question:
Do REST api’s still make sense, considering how we write software today?
To answer this question, let’s look at some of the problems with REST API’s:
Problem -> Many Concurrent Requests
Most non-trivial applications, make many concurrent REST api calls, before the app can even render a view… Why is this a problem? It might not be a problem, if the app has an excellent network connection (like our dev machines do), but it can be a horrible problem, on mobile devices with weak connections.
When mobile devices make many concurrent network requests, the response is often very slow, and the app might seem unresponsive... and it may not work at all. This can result in a dismal user experience.
So, how much should you care about mobile devices?
Well, the majority of web traffic, comes from mobile devices, which often have poor network connections… and the next Billion internet users, will primarily be smart phone users... are you thinking about them?
"Does GraphQL suffer from this problem?"
Nope, GraphQL allows you to avoid this connection heavy behavior, by combining all your data queries, into a single server request, which greatly improves real and perceived performance.
Problem -> Multiple round trips to the server (Under-fetching Data & N+1 Problem)
Sometimes, apps needs to fetch some initial data from the server, then the app might need to make subsequent requests, based on the initially returned data. In other words, your app might need to make multiple round trips requests to the server... This results in a slow app, and it can be a real server performance killer.
"Does GraphQL suffer from this problem?"
Nope, with GraphQL, you avoid this type of “chatty” communication, because GraphQL allows you to perform rich/deep queries, that fetch exactly what you need, in one round trip, and you’ll avoid the N+1 problem, that can kill your servers performance.
Problem -> Over-fetching Data
Often, REST apis give you more data, then you need. For example, imagine you're fetching some information about a book, but you only need the books title and description, there's a good chance a REST api gives you all 50+ properties of the book... You're over-fetching data and you end up taxing your servers and clients, dealing with unnecessary data/bandwidth, which results in degraded application performance.
"Does GraphQL suffer from this problem?"
Nope, with GraphQL, you won’t fetch data that you don’t need, instead you create explicit queries, asking for exactly what you need, and the graphQL server provides just what’s needed... Nothing more, and nothing less.
Problem -> Discoverability & Documentation
Imagine you’re a new employee, and you’re trying to figure out what your companies existing REST api’s have to offer. This can be quite a challenge. If your lucky, people are maintaining documentation on the api, but more often, you’ll need to ask someone, and/or dig through the code, just to figure out what's available.
"Does GraphQL suffer from this problem?"
Nope, figuring out a GraphQL API is easy.
How’s this possible?
Many of the features in GraphQL, allow the creation of excellent developer tools such as GraphiQL and Insomnia. Tools like these greatly improve API discoverability, which you'll learn in this course.
With GraphQL, developers can quickly and easily figure out what the api offers, completely on their own.
Problems -> Slow Development
It sucks when you have to wait on other people, to complete your job. Countless times, I’ve been blocked on a task, waiting on a backend developer. This interruption really sucks, especially when I'm in a flow state.
"Does GraphQL suffer from this problem?"
Sometimes, but not nearly as frequently as REST. With GraphQL, often you can add new features, without having to touch the backend... this allows you to move faster and be more agile... How? because you're not stuck, waiting on someone else.
For example, if you’re adding a feature to an existing page, and you need some additional data... with GraphQL, you’ll often just modify your GraphQL query, to fetch the additional data, which usually takes a matter of minutes... With REST, you'll often need custom endpoints created, which slows you down.
Problem -> Custom endpoints & duplicate server-side code
Often, to get around the shortcomings of REST ( multiple round trips, N+1 problem, etc), developers create one off, custom endpoints, which breaks “REST” principles, but it's usually a reasonable compromise for performance… However the problem is, often you end up duplicating code on the server-side, when you’ve got multiple endpoints, that are just slightly different.
"Does GraphQL suffer from this problem?"
Nope, with GraphQL, your server-side code is reused, across vastly different queries by default. For example, if you’ve got some code that fetches information about a book, that same server-side code, will be used when your book queries are for: Purchasing, Selling, Planning, Distribution or any other purpose.
These are just a few of the problems REST api's have... GraphQL was created to solve these problems, and many more, which you'll learn in this course.
Who is this course for?
This course is for developers who are familiar with JavaScript, and are interested in understanding how GraphQL can improve your applications performance, and significantly improve the developer experience.
What Will I learn in this course?
You can think of GraphQL as 2 separate, but related parts:
A Query Language and
A Server Runtime to satisfy queries
In the first part of the course, we’ll focus on learning the Query Language, which includes topics such as:
Scalar Types
Object Types
Query Parameters
Variables
Interfaces
Aliases
Fragments
Union Types
Directives
Input Types
Root types (query & mutation)
Error handling
Discoverability
Tooling / GraphiQL
...
In the second part of the course, we’ll focus on building a GraphQL server, for the courses project app Hacker Book Review.
We’ll build the server with Node.js and PostgreSQL, and we’ll use excellent and popular open source GraphQL libraries.
What are the pre-requisites for taking this course?
You should be familiar with Modern JavaScript.
What will we be building in this course?
In this course, we’ll be building the GraphQL server, needed for our project app... Then we'll be creating the GraphQL queries needed for the app, and then we'll connect the app with the GraphQL server.
Hacker Book Review - A book review app for hackers like us.
Why should I take this course from you?
My courses are different from most Instructors. I keep things as practical as possible, I try to provide good visuals and animations to help you learn as fast as possible. I put hundreds of hours into making these courses, so they are well thought out and to the point... and most importantly, I don't want to waste your time.
How much content is in this course?
This course has more than 50 videos and over 5 hours of focused content, additionally there are more than a dozen hands on exercises.
How long will it take to complete this course?
That depends on you... If you're really ambitious, you could probably finish it in a weekend, but the pacing is up to you.
What's the result I'll get from taking this course?
By the end of this course, you'll have a good understanding of what GraphQL is, why you'd use GraphQL and you'll be able to create and use a GraphQL server.
- Familiar with Modern JavaScript
- A desire to learn Awesome cutting edge technology
- Frontend and/or Backend JavaScript developers interested in learning how to Create and Use a GraphQL API
What you'll learn:
- What GraphQL is & why you should strongly consider using it instead of REST apis
- How GraphQL eliminates many of the problems REST api's experience
- How GraphQL Avoids Overfetching Data
- How GraphQL Avoids Underfetching Data
- How you can avoid many concurrent REST/HTTP requests by using GraphQL
- What the N+1 Problem is, and how to avoid it with GraphQL
- How a GraphQL API is easier to learn, because of it's Discoverability features
- How to build GraphQL API's from scratch using JavaScript
- How to consume a GraphQL API in your applications
- How GraphQL provides the best possible performance for applications
- How GraphQL makes teams more Agile
- How GraphQL helps you to avoid Duplicate Server-side code
Watch Online GraphQL for beginners with JavaScript
# | Title | Duration |
---|---|---|
1 | Why GraphQL? | 05:25 |
2 | The Problems with REST | 09:48 |
3 | What We'll Be Building | 06:30 |
4 | The Graph in GraphQL | 05:26 |
5 | What is GraphQL? | 04:58 |
6 | First GraphQL Query | 05:52 |
7 | Discoverability | 07:43 |
8 | First GraphQL Server - Part 1 | 05:10 |
9 | First GraphQL Server - Part 2 | 10:32 |
10 | GraphQL Data types Introduction | 04:35 |
11 | Scalar Types | 05:28 |
12 | Object Types | 04:46 |
13 | Query Parameters | 07:55 |
14 | Variables | 06:03 |
15 | Interfaces | 04:58 |
16 | Aliases & Fragments | 10:10 |
17 | Union Types | 06:52 |
18 | Directives | 03:56 |
19 | Mutations and Input Types | 05:08 |
20 | Errors | 03:12 |
21 | GraphQL without GraphiQL | 10:50 |
22 | Server Planning | 02:02 |
23 | Review Starter Project | 04:49 |
24 | Installing PostgreSQL | 01:21 |
25 | Installing PostgreSQL on Windows | 03:55 |
26 | Installing PostgreSQL on Linux | 02:32 |
27 | Installing PostgreSQL on Mac | 02:00 |
28 | Introduction To SQL | 12:41 |
29 | Create / Setup App Database | 08:32 |
30 | Create a GraphQL HTTP Server | 06:34 |
31 | Add GraphQL 'Books' Field | 07:29 |
32 | Query Books from the Database | 05:10 |
33 | Challenge Review - Adding 'subtitle' & 'ratingCount' Fields | 03:22 |
34 | Add ImageUrl field to book type | 06:44 |
35 | Add authors field to book type | 07:34 |
36 | Optimize with the Dataloader - Part 1 | 10:42 |
37 | Optimize with the Dataloader - Part 2 | 09:56 |
38 | Add GraphQL 'reviews' Field | 03:07 |
39 | Add 'book' field to Review Type | 14:46 |
40 | Challenge Review - Add 'book' field to Review type | 03:43 |
41 | Sorting Queries | 07:21 |
42 | Create Home Page Query | 03:02 |
43 | Use the Home Page Query in HackerBook Review App | 11:16 |
44 | Create Book Detail Page Query | 03:45 |
45 | Add 'book' field to Review Type | 05:35 |
46 | Add Query to Book Page in HackerBook Review App | 05:32 |
47 | Query 'book' for Book Review Page in HackerBook Review App | 03:18 |
48 | Create Book Review Mutation | 06:58 |
49 | Use the Book Review Mutation in HackerBook Review App | 03:33 |
50 | Add 'searchBook' field to query Google Book API | 05:49 |
51 | Use 'searchBook' field in HackerBook Review App | 03:08 |
52 | Add 'createBook' mutation | 05:27 |
53 | Use 'createBook' mutation in HackerBook Review App | 02:19 |
54 | Add a Global 'search' field | 09:34 |
55 | Miscellaneous & Cleanup | 01:45 |
56 | GraphQL / Versionless | 03:41 |
57 | Final Thoughts | 01:12 |