Why GraphQL

GraphQL is a data query language developed by Facebook under MIT license. It is not tied with any specific database or specific programming language or storage.

It provides a way to define complete description of data in schema and allows client to ask for what they need, simply returns the response in JSON.

Why Facebook developed GraphQL ?

Back in 2012, Facebook was working on their mobile application for Android and iOS platform. They had to make changes in the rest services according to the mobile platform. To resolve this, either make a different rest API for the Android and iOS platform or do handling at multiple places in a rest service. Sometimes in large codebase it becomes very messy and frustrated to manage it and multiple versioning of the API’s.

I see that sometimes we have a lot of attributes in the response of the rest API’s which sometimes is not useful for the client always, so devices which are on low network bandwidth has to wait long to get big JSON.

Here, Facebook team started to work on GraphQL to solve these problems and rethink data fetching way for devices, specially which are on low network bandwidth. It moved focus on developers at client side to ask what they need.

Why you should use GraphQL ?

  • Versioning: To avoid multiple versioning of your rest API.
  • Ask for what you need: Client has a provision to ask only those fields which they needs. There would be no handling on server side specific to the platform.
  • Get many API’s response in single request: Client has to call one query to get data from multiple rest API’s.

Most important basic component of GraphQL is object types which defines kind of object client can fetch from the service. In GraphQL, it represents like this:

type Event {
# Access Keys created for this Event
accessKeys: AccessKeyConnection

# The street-level address of the Event
address: String

# Future or ongoing TimeSlots for which tickets can be purchased
availableTimeSlots: TimeSlotConnection!

# Whether to show an alert that the Event is almost sold out
capacityAlert: Boolean

# The city of the location of the Event
cityName: String

# The currency specified by Host
currency: CurrencyCode!

# A detailed description
description: String!

# Discounts created for this Event
discounts: DiscountConnection

# A user-configurable setting determining whether the TimeSlot of the Event should be disclosed to the Buyer
hiddenDate: Boolean!
host: Host!
id: ID!

# A URL to the event image. Custom height and width can be supplied
imageUrl(
# Height of the image
height: Int = 160

# Width of the image
width: Int = 160
): String!

# Maximum number of items which are sellable for Event.The value depends on Rates' maxQuantity.
maxQuantity: Int

# Orders created for this Event
orders: OrderConnection

# The privacy setting for the Event
privacy: EventPrivacy!

# Only for users who can manage the event
privateNote: String

# Product types (Tickets or Passes) that can be sold for this Event
rates: RateConnection!

# Whether the Event Saved by the Viewer
saved: Boolean!

# List of all Savers who saved the Event
savers: SaversConnection

# A unique identifier, shorter version of the ID. Should be used for URI construction.
slug: String!

# The Event state
state: EventState!

# A date/time for which tickets can be purchased. Each Event can define one or many TimeSlots
timeSlots: TimeSlotConnection!

# A brief description
title: String!

# Event URL
url: String!

# The name of the location of the Event
venueName: String
}

There are two special types in object types. Query and Mutation. Object types has a query type and may or may not has mutation type. They defines the entry point of every GraphQL query.

type Query {
event(id: ID!): Event!
viewer: Viewer!
}

So, Query looks like this. Here you can ask what you need, I am trying to fetch the event details like title, description, url. You can ask for more details according to your need.

{
event(id: "5983706debf3140039d1e8b4") {
title
description
url
}
}

Here, you can also ask for event location and weather which is handled by different rest API. It helps to fetch data from multiple resources in single request.

For this, you have to implement schema stitching to establish a link between two schema. Now, your query should look like this:

{
event(id: "5983706debf3140039d1e8b4") {
title
description
url
location {
city
country
weather {
summary
temperature
}
}
}
}

Please, if you find something to improve or any suggestion, don’t hesitate to contact me, I’ll try to do my best to answer any question or improve this tutorial.

Happy Coding!