What is GraphQL (Part 1)?

In our last post we were exploring GatsbyJS and something we overlooked was how GatsbyJS was using GraphQL.

We felt, GraphQL deserved it's own blog - i.e., more content! 🤟.

What is GraphQL?

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

GraphQL has a good phrase to explain this:

Ask for what you need,
get exactly that

Everyone: Umm, that isn't very clear on what GraphQL does and where it is used?

Fair enough 😓.

Let's say you want to build a blog. You would be needing two pages:

• A page for listing all the posts.

• A page for showing and individual post and it's contents.

Our API output structures would look something like this:

1. For getting a single post.

{
    id: string,
    title: string,
    body: string
}

1. For Listing for all the posts

{
    posts: [Post] // a array of all the posts
}

Things are about to get a little interesting now.

Now, if you see for listing Posts , our query structure sends in everything about each Post , including the body for each Post which we don't want to list and it just increases the payload.

GraphQL has entered the chat

With GraphQL, it's much easier to take care of this. You can specify the appropriate query structure to get what you want. Now, posts would look something like this:

{
    posts: [
      {
        id: string,
        title: string
      }
      ...
    ]
}

Everyone: Where did GraphQL come from and save the day?

Now, so far it's not a very clear picture on how GraphQL came in and solved this issue. But, what GraphQL does must be getting a bit clearer by now.

How does GraphQL save the day?

GraphQL saves the day in two ways:

1. Server side: GraphQL can be used from the server side.

Note: There are various implementation, but since we our core is javascript. We choose to use express (web framework for Node.js)

So, say you have a web app and want to integrate GraphQL from backend you can use express-graphql.

Picking from docs , a simple setup would be:

var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');

// Construct a schema, using GraphQL schema language
var schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// The root provides a resolver function for each API endpoint
var root = {
  hello: () => {
    return 'Hello world!';
  },
};

var app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000);

If you run this locally, you could check http://localhost:4000/graphql

Everyone: So, does that mean we don't need REST anymore?

A lot of pieces are still missing, but spoilers: yes you could switch from REST to GraphQL. Although, currently most of the implementations that are happening are more of a wrapper for GraphQL around REST.

Which leads us to...

1. API wrapper

GraphQL is relatively very new (was open sourced in 2015) compared to other methodologies for eg; REST(was released in 1999). Currently the approach that the industry has started to embrace is that of using a API wrapper for GraphQL over existing methodologies, so it doesn't matter whether it's REST or SOAP.

We will be exploring that in part 2 (in progress) in which we will also discuss on how to integrate with React.js.

Why are we embracing GraphQL as a new standard ?

One of the core things that GraphQL gives power is that the frontend can request for the exact data that it wants.

Everyone: Why does that matter, is the flat structure of RESTful API not enough?

This is probably one of those questions that we don't really understand until we really get to the origins of why and how GraphQL came to be.

We thought of writing about it, but there is a very good documentary 😍 that we would like to leave you with. They have traced the entire origin of GraphQL and how companies like Facebook, Github and Twitter etc., are adopting it.

The overall goal with this blog was to discuss how GraphQL works and give a brief overview into how the magic happens.

Stay tuned for part 2

You can also follow our blogs on https://blog.quicklyreact.com