GraphQL for Beginners with JavaScript

Author: James MooreUpdated on:

"Why should I learn GraphQL?"

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!

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 (see below).

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.

Hacker Book Review App

How do I get Help?

If you’ve got questions, or you’re stuck, you can either:

  • Ask a question in the comment portion of each video or
  • You can join the knowthen slack community, and get realtime help from other students or myself. I try to make myself available for ~1 hour every weekday in slack, you can see when I'm available in my slack profile.

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.

What's the course like?

Here's the first video in the series, which will give you an idea of what you can expect in this course.

What if I don't like the course?

I offer a no questions asked, 30 day money back guarantee. If for any reason, you would like a refund, just shoot me an email and I'll promptly refund your purchase.

Buy Now