SS
Blog
Projects

How GraphQL changed the game for the web.

SS

Siddharth Sharma / April 07, 2020

6 min read

A GraphQL Deep Dive for REST-Less Beginners. (A 3 Part Series)#

(i Can't Tell You How Proud I Am of That Title.)

I don't know if there is a more "I'm so smart, I know Tech"-ier word than GraphQL. It sounds really complicated.

When really, it's quite the contrary. GraphQL is a technology that really revolutionized the industry. I don't think people have yet grasped the power of GraphQL as it's adoption rate is still quite low.

If It's so Great, Why Aren't People Using It?

This is actually a very good point, and I personally believe it's because of the commonly known phenomena, technophobia.

What is technophobia? Well...

"The fear of technology, also known as technophobia, is the fear or dislike of advanced technology or complex devices, especially computers. Technophobia is surprisingly common. In fact, some experts believe that we all suffer at least a small amount of nervousness when confronted with new technology" -Very Well Mind

People are scared of what they don't know, that's a philosophical fact of the human mind, and how it thinks. It seems like a natural instinct to want to gravitate towards stuff we know.

There's absolutely nothing wrong with this, but sometimes we end up missing out on very well versed technologies, out of the fear and thought of "Man this is going to take so long to learn".

We actually don't have to look to far in the past to see this happen before. SOAP and REST were in the battle REST and GraphQL are in now. REST was actually introduced before SOAP, but the W3C ended up adopting SOAP as the protocol of choice. It wasn't till about 2008 people started using REST over SOAP.

Why the History Lesson, Man?

Ok, ok, I get it, but the point I'm trying to make is that GraphQL was released publically in 2015, but it's first stable release was 2017/2018ish.

GraphQL is very new, but it's my prediction that by 2024/2025ish, it's going to be the norm. Every 8-10 years a ground breaking technology creeps above others and that's GraphQL, for this decade. Beat the curve, master this technology before it's adopted by the masses, and distinguish yourself from the herd.

Alright, I'm Intrigued, What the Heck Is This Thing?

I'm first of all going to assume you already know what a REST API is. If you don't know then this post is basically me yelling at wall, so just ignore everything I've said and start using GraphQL. (kidding, you're more than a wall to me ❤️)

REST is a very efficient paradigm, and in retrospect, it's very planned out and fundamentally solid. But REST is very very verbose.

What do I mean by that, let's take a look at a simple rest endpoint?

'https://jsonplaceholder.typicode.com/posts';

See That's Not so B...

"https://disqus.com/api/3.0/forums/details?forum=
9to5googleprod&attach=forumFeatures&api_key=
E8Uh5l5fHZ6gD8U3KycjAIAk46f68Zw7C6eW8WSjZvCLXebZ7p0r1yrYDrLilk2F"

Ohh God Make It Stop.

See, the first endpoint is a very optimistic happy path. You're more likely to run into some form of the 2nd one in a work setting. API Key's all over the place, long routes, it just continues to get really hard to read and manage. For Front End development, it means you'll have to construct this URL constantly, and you'll be using endless constants, and it's just going to turn into a lot of tedious stuff to manage.

Ok, Go on...

Now if we were to, let's make up a word here, GraphQLify(😉) both these endpoints you'd get this as the URL.


Literally the 2nd link got shorter. And that's the magic of GraphQL it is so declarative, it hurts (so good).

Seriously, we only have one single endpoint for any GraphQL API. That's where GraphQL is different from rest. We don't need to shove all the parameters in the URL, we can send them as queries. This makes the endpoints much more readable and decouples API keys and params from the URL.

Now GraphQL has 3 main concepts, which we'll deep dive into.

GraphQL Main Concepts

Queries

A Query in GraphQL is equivalent to GET in REST.

That it. If you're trying to get some information, think of it as though you're doing a get request.

When you do a GET Request you're just reading data, which is literally all that a query is. Super Simple. Honestly didn't even need a blog post for this.

An Example#

To really show the simplicity of GraphQL compared to rest, lets build a simple API that will hit a rest endpoint and lets return it's results, but here's the catch, we're going to graphql-ify it, so it's actually a GraphQL API.

This will show you how easy it is to convert an existing REST API into a GraphQL API.

Let's use our favorite rest API: Posts

The response of this API is an Array, which is something important that we should note. We're going to want to make a model of this data, also known as a Schema.

Our data looks like the following:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "..."
  },
  ...
]

So we can deduce our schema to be the following.

userId: ID!
id: ID!
title: String!
body: String!

Lets think of ID as a specific type, something like Int, Float, and String.

We're basically modeling our data at this point, so we can go even deeper and model our schema as the following.

// schema.js

type Post {
  userId: ID!
  id: ID!
  title: String!
  body: String!
}

type Query {
  fetchPosts(): [Post]
}

Let's think of type as a prefix to a variable. Once we declare a type, we can reuse it anywhere.

Surrounding the data field with [] implies we're expecting an array.

The last part is an AWS Amplify specific task. If you're not familiar with AWS Amplify, don't worry, I'll be explaining it in future blog posts. It's amazing and it's my GraphQL service platform of choice. It makes life really easy for you and really reduces the learning curve for GraphQL.

In the next Post We'll talk about what exactly is fetchPosts() and what it's doing. If you want to do some homework before I make the next post, fetchPosts() is basically a Lambda Resolver, which basically means, it's going to hit the REST API Endpoint for us and Resolve our request so we can use GraphQL's power on it.