GraphQL is becoming a popular standard for e-commerce due to the reduction in time and amount of code needed for front-end developers. But what is GraphQL and what do users need to know before diving in?

What is GraphQL?

GraphQL is a layer that sits on top of REST APIs, any application, or datastore, that that makes it easy for front-end developers to retrieve exactly the data they want, regardless of where it is. Using a SQL-like syntax, front-end developers can effortlessly retrieve all the data needed to render a web page or app screen with a single query. GraphQL has been used since 2014 to power Facebook and Twitter ended up adopting it shortly after. Every Facebook post or Tweet you read is powered by GraphQL behind the scenes. GraphQL is now being used by AWS, Airbnb, PayPal, and a who’s who of other large tech and consumer companies. GraphQL is also being used by online commerce vendors because of the many problems it solves in that domain.

With GraphQL, all a client-side developer has to do is describe what data they want in one query and submit it to GraphQL. For example, a developer could be rendering an order history page and need data from the order, customer, and product catalogue REST APIs. Rather than access each one of those APIs individually, the GraphQL layer will do that for you. Developers then get back a single JSON object with exactly the data that was requested. It doesn’t matter which programming language is used, as it is a specification rather than an implementation.

What problems does GraphQL solve?

Lack of discoverability

When calling REST APIs, it’s often unclear to front-end developers which ones hold what data and what how fresh that data is. For example, should a front-end developer retrieve a product’s inventory from the Order Management System (OMS), the Enterprise Resource Planning system (ERP), the Warehouse Management System (WMS), or the e-commerce platform? It’s never very clear where data is or how fresh it is.

Data underfetching

Underfetching data is a common problem with traditional REST APIs. Sometimes a REST API won’t return enough data, or sometimes you have to retrieve data from one REST API before you can call another REST API. This particularly affects devices like mobile phones which have limited processing power and are connected to high latency cellular networks. As a consequence, when making lots of HTTP requests, the time it takes a browser to view a product page can go up from milliseconds to seconds. It may not seem like much of a difference, but in a world where the consumer expects a web page or app to load instantaneously, slow performance could dramatically reduce customer satisfaction and lead to loss of customers.

Data overfetching

Overfetching is also a serious problem. Let’s say a developer is building a product detail screen for an Apple Watch client. You’d only need the product’s name, an image and its price to render that screen. But retrieving an entire product object from a REST API could result in dozens or hundreds of fields for that product being fetched and then ignored. Again, this leads to serious performance issues because of the sheer amount of data being retrieved over what is often a high latency, low bandwidth connection back to the server.

What are the benefits of GraphQL?

Easy front-end development

As GraphQL is the layer that decouples back-ends from front-ends, it allows front-end developers to make changes quickly and easily. Front-end developers don’t need to spend hours looking for the right APIs to call or for the most up-to-date versions of data, as that is handled by GraphQL. This enables e-tailers to more regularly innovate by testing and rolling-out new shopping features, differentiating their offer and staying ahead of the competition.

Better performance for end-customer

Instead of developers having to make HTTP requests over mobile networks – which are typically constrained by bandwidth and processing power – GraphQL makes all the requests within a data centre where bandwidth and computing power are essentially unlimited and latency is basically zero. This allows faster loading of content and applications for the end-user, creating a much more pleasant shopping experience and driving higher consumer satisfaction.

Less code maintenance

With GraphQL there is far less code to maintain as front-end developers don’t need to deal with the logic needed to call and authenticate with the various REST APIs or other backend systems. Instead, the clients just need one connection to the GraphQL layer. Everything else is managed from there. Moreover, GraphQL gets rid of the need for back-ends for front-ends, as developers can just make requests to GraphQL for the data they need, slashing the amount of code that must be written, tested, maintained and run. As a result, front-end developers can spend more time being creative and less time in mundane work, which in turn boosts job satisfaction.

What are the disadvantages?

It is important to remember GraphQL is not a silver bullet. While it eliminates the need for what could be hundreds of back-ends for front-ends, it is ultimately another layer that must be maintained with its own architecture, development, operations and more. It also leaves the responsibility of security up to the user.

Another drawback is that it can be difficult to combine multiple GraphQL endpoints and schemas. While one front-end developer may want one endpoint and schema, other teams and vendors will have their own, so front-end developers will have to access multiple endpoints. This can be solved, but it does require some exposing a single GraphQL endpoint and schema via schema stitching or schema federation.

From the reduction in development times to the huge decrease in code to manage overall, it is no surprise GraphQL is making waves. But in order to fully capitalise on the technology, front-end e-commerce developers should ensure they educate themselves fully before making the leap.

Written by Kelly Goetsch, Chief Product Officer at commercetools, and author of GraphQL for Modern Commerce which will be out in January 2020 (published by O’Reilly).