Learn GraphQL: Introduction to GraphQL – Part 1 of 3

This is a three part series guide that will help you to learn about GraphQL, and also will help you to learn how it works with an application by building a simple Contact Manager app with Angular, GraphQL,  Node.js/Express.js and MySQL.

In this first part of the series, we will explore the GraphQL and it’s basics.  In second part, we will learn how to build  the GraphQL server for aforementioned Contact Manager app. And, in last part we will learn how to create Contact Manager app with Angular and consume the GraphQL endpoint.

Let’s get started with the GraphQL and it’s basics:

What is GraphQL?

GraphQL is not a framework or library on its own, it is just a data query language which basically defines the structure and typed for API. It is developed at Facebook in 2012 and open-sourced in 2015.

Today, GraphQL is used in different environments and languages. Facebook, Pinterest, Github and Twitter are some of the biggies that use GraphQL.

Why GraphQL?

GraphQL allows flexible and optimized response. The endpoint returns only the requested data and structure as the response. The expected structure and data of the response can be defined in the query which will be sent to the GraphQL server. The return response from the GraphQL API is same as the structure and data defined in the query.

So, with GraphQL only one endpoint is required with the response data always predictable and returns only the required data. No more multiple network request and unnecessary data roundtrip over the network. This enables faster application response time and provides better user experience, particularly in mobile.

GraphQL also offers self-documentation which makes the API documentation much easier and a big time-saving. Using its in-built GraphiQL tool, you can easily explore the auto-generated API documentation. Learn more about GraphiQL below.

Basics of GraphQL

GraphQL query has three root types:

1) Query

It describes the structure of the data that is expected as a response from the GraphQL endpoint. It has “query” as the root type. Below is a simple GraphQL query for fetching all the contacts’ fullname and email fields.

query{
  contacts{
    fullname,
    email
  }  
}

2) Mutation

It is the GraphQL query for writing and reading data to and from the backend. The syntax is almost similar to that of the Query but with “mutation” as the root type. Below is an example of creating a new contact and fetches the newly created contact id.

mutation{
  createNewContact(
    fullname: "Kay Lawson", 
    email: "[email protected]",
    birthday: "1990-01-01"
  ) {
    id
  }
}

3) Subscription

This is similar to the Query but will inform the subscribed client when any data changes.

Let’s get to know some of the important terms in GraphQL:

Field

It is a property in GraphQL Object that points to a piece of data or to Objects.

Type

It is the fundamental unit of GraphQL Schema. There are many types in GraphQL, out of which the most common GraphQL types are:

  • GraphQLObjectType: It represent object data described by a list of Fields, each of which has a name, potentially a list of arguments, and a return type.
  • GraphQLString: It represents a text data, represented as UTF-8 character sequences.
  • GraphQLID: It represents a unique identifier.
  • GraphQLList: It represents a list of other types.
  • GraphQLNonNull: It helps to define a field as a required field.
  • GraphQLInt: It represents a number data without a decimal place.
  • GraphQLFloat: It represents a number data that has a decimal place.

It is also possible to create custom GraphQL type with GraphQLScalarType. But it requires to handle how Serialization, Parsevalue and ParseLiteral implementation should be defined.

Schema

It describes the GraphQL API’s type system by using Schema Definition Language (SDL). It includes a complete set of data and defines how the data can be accessed. So, it defines what operations are available to queries. Each time an API is called, it is validated against that schema and the operation is executed only if the validation success otherwise an error is returned.

Resolver

It is a function which is responsible for resolving the data of a specific GraphQL field. The resolver function for each field defined in the query will get called when responding to the query by the GraphQL.

Fragment

It helps to share GraphQL fields among Queries, Mutations or Subscriptions. Thus helping to avoid repetition of the same units by providing reusability through declaring as Fragment on a data type.

Introspective

You can examine GraphQL for the call it supports  by querying the GraphQL server itself with the help of tool like GraphiQL.

GraphiQL

It is a GrpahQL in-built interactive graphical interface tool which runs on the browser and can be accessed via the endpoint URL. You can directly type in your GraphQL query in the user interface left pane and run it to get the response from the GraphQL server. This tool also provides auto-completion as you type in the query.  With this tool documentation on the right pane, you can easily explore the API’s available root type, it’s fields and type.

Running query to fetch all contacts on GraphiQL
Running query to fetch all contacts on GraphiQL

 

Continue reading the next part of this series in which we will explore how to build GraphQL server with Node.js/Express.js and MySQL. We will also explore how to consume it with an Angular app by building a simple Contact Manager app. 

Learn GraphQL: Build Contact Manager App – Part 2 of 3

Mapu

I am a technology freak with passion for UI technology.

Leave a Reply