Build a lightning fast front-end with commercetools GraphQL

In the past decade, APIs have taken the web by storm, making it easy to perform the integration of content and functions with different internal and external services. In recent times, you may have noticed the name GraphQL pop up here and there. It’s not just another buzzword, but the next big thing that will improve the way we work with APIs, develop software and enhance customer experiences. But what is GraphQL and how does it help your developers work faster and more efficiently? Look no further — we’re here to find out.

GraphQL is a data query language for APIs that allows client developers to retrieve the exact data they want from any source; enabling brands to build experiences faster. Being both API-first and an early adopter of GraphQL, commercetools is the first enterprise commerce platform provider to utilize this modern approach to working with APIs. Front-end developers working with commercetools APIs are able to retrieve the data they need (for displaying to users from sources like databases, or applications) faster and more efficiently than ever.

GraphQL stemmed from Facebook’s need for a “data-fetching API powerful enough to describe all of Facebook” when working on their mobile app. They were rebuilding their mobile app to address high network usage problems. Specifically, the stories within their newsfeed composed of different types of data, and a lot of data, with some interlinked with one another. This complex set of needs made it tough to create a rich content experience using existing APIs and that’s when Facebook began working on what would eventually be GraphQL. Subsequently, GraphQL was made to be an open-source data query and manipulation language for APIs, and has seen increasing adoption since being publicly released in 2015. 

So what exactly is it? GraphQL is a complementary layer on top of APIs that allows developers to retrieve the exact data they want, from any source (that could be APIs themselves, but also from databases and other applications). Make no mistake, this isn’t a replacement for APIs — unlike APIs, GraphQL is aimed squarely at data, both retrieving and changing it.

Front-end developers work a lot with data and GraphQL streamlines their workflow greatly by allowing them to get and work with just the data they need, no more or less. Imagine that the developers working on your eCommerce website need to get data about products for tracking inventory. Traditionally, this would involve calling for product information and the response would provide everything stored in the database.

That will get you the details you need, but also a whole lot of extra information you don’t need. For example, you might only need the product names and SKUs to build an inventory list, but the query might also return product descriptions and specifications (which you don’t need). And that’s the problem — developers should be served only the exact data they asked for. Dealing with excess data means time wasted filtering them out and additional computational overhead (which is bad for server load and costs).

GraphQL also reduces resource usage by minimizing requests required to get the necessary data. Take an order history page as an example. Rendering this page for a customer needs many API calls, often sequentially since certain data serve as prerequisites to getting further information — you’ll need the shipment status of an order before listing the possible actions for a customer (they shouldn’t be able to request for support or return an item that hasn’t shipped yet, but can cancel such an order instead), and you’ll need a list of orders for a customer before you can denote the shipment status of each order.

This can result in a pile up of API calls that increases in orders of magnitude when pages host more information for the customer. That’s going to increase server costs and load; combined with high traffic, it has the dangerous potential of bringing your entire operation down, often during critical times such as Black Friday or seasonal sales. And it’s happened before: Businesses lose hundreds of thousands to millions in revenue as a result of downtime. GraphQL allows you to cut back on API calls necessary while getting the exact data you need.

To summarize, before GraphQL, there were two common ways to get only the data you wanted, but with downsides:

1. Under-fetching data: You could get data piece by piece, but these would require individual requests that each came with individual authentication needs. This setup would quickly become clumsy and resource-consuming over time.

2. Over-fetching data: You might opt for fewer requests but this gives you too much data, a lot of it unnecessary. To deal with that, you’ll have to build a “backend for your front-end” to call APIs and filter the data for you. This inadvertently spawns many pages that you’ll have to manage which also ends up messy and tedious to work with.

GraphQL makes the jobs of frontend developers easier and builds experiences faster by enabling queries to return the exact data that developers requested. It does so without complexity and the need to jump through hoops. GraphQL is a true solution, as opposed to past implementations which were essentially workarounds. The complicated workarounds often included back ends for front ends, which are little applications whose sole responsibility is to pass back requests to other APIs.

As an API-first, headless eCommerce platform, commercetools uses GraphQL to empower our customers and their development teams. Ecommerce requires working with a lot of data (such as product catalogs, orders, customer profiles, and more) and that naturally leads to a lot of queries.

GraphQL makes the quality of life for developers to get the data they need from us. In combination with tight React integration, the process of building the front-end of your store becomes incredibly easy and smooth. That means less development time and accelerated pace of change — making your business nimbler and more agile, drastically improving your ability to react to changes in the market and competitive landscape.

In addition, GraphQL brings substantial performance improvements to the table, letting you do more, with less (computing resources, load times and downtime). commercetools supports a huge chunk of queries; more than other vendors, if they even support GraphQL. As expected for their lumbering, monolithic nature, very few legacy eCommerce solutions support GraphQL because it’s hard to support a modern language in an outdated tech stack.

The great news is that GraphQL is increasingly adopted by other API-first, headless vendors in other spaces such as content management systems (CMS). We’re partners with many of them, allowing you to complement our cutting-edge eCommerce platforms with other modern solutions and digitally transform your business in full.

To learn more about GraphQL, get your free copy of our brand new O’Reilly booklet GraphQL for Modern Commerce, written by commercetools Chief Product Officer Kelly Goetsch.