RESTful web services have been providing basic support for simple query structures for years. However, these services don’t provide granular control over data that allow developers to exercise flexibility without creating a huge collection of unnecessary calls.

Originally built by Facebook, GraphQL is a query language for APIs that lets developers choose the types of requests they want to make and receive the information they require in a single request.

In this article, I’ll explain what GraphQL is, how it started, and how it became an essential tool for developers build APIs. We’ll also cover the key components of GraphQL and the main players in the GraphQL ecosystem.

Let’s get started!

What Is GraphQL?

In its simplest form, GraphQL is an open-source language for querying databases from client-side applications.

“GraphQL is a query language for your API that shifts the contract between clients and servers that allows the server to say ‘these are the capabilities that I exposed’ and allows the clients to describe their requirements in a way that ultimately empowers product developers to build the products they want to create.” — Dan Schafer, GraphQL Co-Creator

Behind the scenes, it tells the API how to present the retrieved data to the client. This enables developers to make precise data requests so that they receive exactly what they need — nothing more, nothing less.

Here are the key benefits GraphQL offers developers:

Declare exactly what they need from the server and receive the requested data in a predictable way.

Retrieve many resources from the server in a single request.

It’s strongly typed i.e. it allows API users to know (1) what data is available and (2) what form it exists in.

A GraphQL query is essentially a string that, when sent to a server, returns JSON back to the client. These queries mirror their responses which makes it easy to predict the shape of the data that’s returned from running the query. It also makes it easy for developers to write queries if they know what sort of data their app needs.

Unlike RESTful services or complex join statements in SQL, GraphQL is hierarchical. What this means is that it follows relationships between objects which works well with graph-structured data that hierarchical user interfaces use.

GraphQL takes advantage of existing code instead of dictating or providing data stores. It’s introspective which means that GraphQL servers can be queried for the types they support making it easy for tools to build on top of this information.

With GraphQL, the shape of the data that’s returned depends entirely on the client’s query. As a result, additional fields can easily be added to the server (for example, when adding new product features) without affecting existing clients. This works the other way around, as well. So, when you’re sunsetting older features, the corresponding server fields will continue to function even if they’re deprecated. In this way, GraphQL brings about a backward-compatible process that eliminates the need for incrementing version numbers.

Now that we have a better idea of what GraphQL is, let’s quickly take a look at how it all started.

Build an instant GraphQL API with a Database and start discovering how this technology works.

How It All Started

So, how did GraphQL get started? What were developers using before GraphQL and what limitations did it place on them? Let’s find out!

How Did GraphQL Get Its Start?

The shift to mobile

The origin story of GraphQL dates back to the industry’s shift to mobile. This was at a time when Facebook’s mobile strategy (i.e. adopting HTML5 on mobile) wasn’t working due to issues related to high network usage. As a result, Facebook decided to rebuild the iOS app from scratch using native technologies.

The main problem with Facebook’s News Feed implementation on mobile. It wasn’t as simple as retrieving a story, who wrote it, what it says, the list of comments, and who’s liked the post. Each story was interconnected, nested, and recursive. The existing APIs weren’t designed to allow developers to expose a rich, news feed-like experience on mobile. They didn’t have a hierarchical nature, let developers select what they needed, or the capability to display a list of heterogeneous feed stories.

In 2012, Facebook decided that they needed to build a new News Feed API in order to build the Facebook mobile app. This is when GraphQL started to take shape and, in mid-August, Facebook for iOS 5.0 was released with the new GraphQL technology. It allowed developers to reduce network usage by utilising its data-fetching capabilities. Over the next year and a half, the surface area of the GraphQL API expanded to cover most of the Facebook iOS app in addition to News Feed. In 2015, the GraphQL spec was first published along with the reference implementation in JavaScript.

Limitations of traditional REST APIs

The main problem with traditional REST API is that it’s slow and requires hard-coding. One possible solution to speed things up is to create multiple endpoints. However, when you extrapolate this to cover all of the data sources and API clients applications need, you run into the limitations of REST APIs.

Let me try to explain the limitations of traditional REST APIs with an analogy.

Say, you have a vending machine. With traditional REST, you press one button on the vending machine and get one thing. So, you have to press lots of buttons one at a time to get everything you need. This process is slow.

But if you have special purpose buttons, you can get multiple things at once. So, for example, you could press a special purpose button and get four things from the vending machine.

A mix of these two approaches is to have a vending machine where you can press exactly the buttons you want in combination and get everything you need in one go. This is what GraphQL does.

GraphQL aims to solve these issues by having a single ‘smart’ endpoint rather than having many ‘dumb’ endpoints. The key benefit here is that smart endpoints are able to take complex queries and shape the data output into whatever the client requires.

Essentially, the GraphQL layer exists between the client and data sources. Its job is to receive client requests and fetch the necessary data based on the client’s requirements. Simply put, the GraphQL approach to querying addresses a wide range of large-scale app development problems.

How GraphQL Became Popular

As you can probably imagine, there was already a demand in the industry for a solution like GraphQL which is why it caught on pretty fast. Within the first six months, there were implementations of GraphQL in different programming languages including PHP, JavaScript, Scala, Python, and Ruby.

It quickly became popular when new companies and hobbyists started building it out. Eventually, the technology was adopted by bigger companies starting with GitHub in 2016 and later by Twitter, Yelp, The New York Times, Airbnb, and more.

GraphQL Key Components

Practically speaking, the GraphQL API uses three main components:

Queries. A query is the request the client makes. Query fields can point to arrays and support arguments.

A query is the request the client makes. Query fields can point to arrays and support arguments. Resolvers. The GraphQL server won’t know what to do with the queries it gets unless you tell it. This is done using a resolver. In simple terms, a resolver tells GraphQL how (and where) to fetch the data corresponding to a specific field. With GraphQL, the API schema and database schemas you use are decoupled. This allows you to use them as mutation resolvers to modify the contents of your database.

The GraphQL server won’t know what to do with the queries it gets unless you tell it. This is done using a resolver. In simple terms, a resolver tells GraphQL how (and where) to fetch the data corresponding to a specific field. With GraphQL, the API schema and database schemas you use are decoupled. This allows you to use them as mutation resolvers to modify the contents of your database. Schema. A GraphQL schema describes the functionality clients can utilize once they connect to the GraphQL server. The core building block within schemas is called a type.

The GraphQL Ecosystem

Here, we’ll take a quick look at the main players in the GraphQL Ecosystem.

GraphQL Servers

Since GraphQL is simply a specification, you need some GraphQL server implementations to get started.

GraphQL-JS is the original reference implementation of GraphQL which can be used with Express.

is the original reference implementation of GraphQL which can be used with Express. GraphQL-Server is Apollo’s all-in-one GraphQL server implementation which is quickly gaining traction. It can be queried from any GraphQL client.

is Apollo’s all-in-one GraphQL server implementation which is quickly gaining traction. It can be queried from any GraphQL client. GraphQL-Serverless is Back4App instant GraphQL API fully integrated with database(MongoDB) and Cloud Functions. Here you can have access to a Backend as a Service that provides GraphQL APIs.

is Back4App instant GraphQL API fully integrated with database(MongoDB) and Cloud Functions. Here you can have access to a Backend as a Service that provides GraphQL APIs. GraphQL Yoga is Prisma’s server implementation built on Express and Apollo servers.

GraphQL Clients

Although you can query your GraphQL API directly, having a dedicated client library certainly makes things easier.

Relay is Facebook’s JavaScript library for utilising GraphQL to build React applications.

is Facebook’s JavaScript library for utilising GraphQL to build React applications. Apollo Client caches requests and normalizes data which saves network traffic. It also supports pagination, prefetching data, and connection between the data layer to the view layer.

GraphQL Gateways

Perhaps the most popular GraphQL gateway is Apollo Engine. It features query execution tracing, query caching, error tracking, and API performance trend analysis.

Open-Source Apps and Tools

Here are some open-source apps that make use of GraphQL:

Powered by GraphQL, Gatsby is able to fetch data from multiple GraphQL APIs and utilize it to create a static, client-only React application.

is able to fetch data from multiple GraphQL APIs and utilize it to create a static, client-only React application. VulcanJS leverages GraphQL to let users build CRUD applications quickly.

leverages GraphQL to let users build CRUD applications quickly. GraphQL Playground is a powerful IDE that packs an editor for GraphQL queries, mutations, subscriptions, validation, and much more. It allows developers to visualize the structure of a schema.

is a powerful IDE that packs an editor for GraphQL queries, mutations, subscriptions, validation, and much more. It allows developers to visualize the structure of a schema. GraphiQL is an in-browser IDE that interacts with GraphQL APIs, enables data querying, performs mutations, and autocompletes queries.

Conclusion

Though GraphQL was built to solve a very specific problem with Facebook’s News Feed API for the iOS app, it quickly expanded to solve more problems internally at Facebook and, eventually, open-sourced to become a community tool used by bigger companies.

Do you think that GraphQL might end up becoming an industry standard over the next few years? Let me know in the comments section below.