GraphQL for beginners with JavaScript

5h 35m 31s
English
Paid
June 25, 2024

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.

Requirements:
  • Familiar with Modern JavaScript
  • A desire to learn Awesome cutting edge technology
Who this course is for:
  • 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

Join premium to watch
Go to premium
# 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

Similar courses to GraphQL for beginners with JavaScript

Learn HTML Canvas - Pixels, Particles & Physics

Learn HTML Canvas - Pixels, Particles & Physicsudemy

Duration 2 hours 15 minutes 38 seconds
Data Visualization + D3.js

Data Visualization + D3.jssuperhi.com

Duration 16 hours 48 minutes 54 seconds
DevOps.js Conference 2021

DevOps.js Conference 2021devopsjsconf.com

Duration 7 hours 51 minutes 4 seconds
Modern JavaScript Full Course

Modern JavaScript Full Coursefireship.io

Duration 1 hour 14 minutes 10 seconds