Freeborn Charles Blog

What is GraphQL? - A high level overview

April 23, 2020

Introducing GraphQL

In 2012, Facebook in its bid to solve some of the challenges inherent with REST like over-fetching and under-fectching of data, created the GraphQL specification.

GraphQL at its most fundamental level is a language for querying APIs and a server-side runtime for running queries using a type system, which is defined using the Schema Definition Language (SDL) for data - giving client the data that it requests from an API. Think of GraphQL as an application layer query language, just as SQL is a data layer query language.

GraphQL is currently being managed by a community of software developers - since it was open-sourced in 2015. One of the big wins for GraphQL is that it is self-documenting.

A GraphQL service is created by defining types and fields, and providing functions for each field on the types. But how do we go about defining these types and fields? We take a look at some core concepts in answering this question.

Core Concepts of GraphQL

GraphQL is centred on some basic concepts like schema, mutation, subscription, and resolver function.

The Schema

In GraphQL, a service is created through the definition of types and fields using the Schema Definition Language - SDL. This implies that GraphQL is strongly typed. The Schema helps to define the capability of an API and how clients can make requests to the data. Schema also serves as a contract between servers and clients. It’s worth noting that the schema defines root types for the entry point of the API.

Here is an example on how you use schema to create a type and fields -

type User {
            id: ID!
            name: String!
          }

The above code sample means we created a User type with two fields -  id and name, consisting of ID and String types. The exclamation ! implies that the field is required.

Mutation

Mutation in GraphQL is used to handle changes to data. There are three basic kinds of mutations - creating new data, updating existing data and deleting existing data. 

Use the mutation keyword to create or make changes to data like so -

mutation {
          createCustomer(name: "Charles", gender: "Male"){
                         name
                         gender
                         }
        }

Subscription

With subscription, clients can subscribe to an event, and maintain a connection to the server - when the event is triggered, the server sends the data to the client.

Here is an example -

subscription {
             newPerson{
                       name
                       gender
                      }
            }

Resolver Function

The resolver function aids in the delivery of data when a query is made.  It works in such a way that the received query is first checked to ensure it refers to only the types and fields that has been defined by the schema.

And here is where the resolver function comes in - helping to provide the result in JSON.

Here is an example - The query

{
    me{
        firstName
      }
}

The JSON

// JSON result
{
    "me": {
        "firstName": "Charles"
    }
}

Welcome to my digital garden where I share my learnings and cogitations on the modern web development - JavaScript and its ecosystem, React, Gatsby, JAMstack - all written by Charles Freeborn a front-end developer and technical writer. Follow me on:Twitter|GitHub