The first time we wrote about GraphQL, back in 2017, we described it as a shiny new tool developed by Facebook.

GraphCMS, which we presented in that article, was one of the first softwares to use it as a core feature.

It was just another drop in a sea of development tools. No biggie, right?

Not quite.

I think we can all agree that GraphQL is now integral to the modern web ecosystem.

Proof #1: the number of static site generators and headless CMSs making it a prime built-in feature has been skyrocketing in the last few months.

One of them being TakeShape.io, which I’ll explore further in a technical demo at the end of this post.

First, I want to take a look at:

• The state of GraphQL in 2019
• The benefits it brings to headless CMSs
• The tools that feature GraphQL
• An introduction to TakeShape.io

Let’s begin by wrapping our heads around the concepts behind GraphQL.

1. Getting up-to-date with GraphQL

You may be reading without even knowing what GraphQL really is. For clarity’s sake, it’s a query language for APIs that defines how to fetch data from one or many databases.

For a proper technical GraphQL introduction I suggest our first post on the matter.

A lot has changed since its first use case with FB mobile apps back in 2012, mostly regarding its adoption. GraphQL was open-sourced in 2015, giving it an initial burst of life for a larger number of devs. 4 years later, its rising presence in our industry is undeniable.

Proof #2 that GraphQL is an integral part of web development: its adoption by tech giants. Apart from Facebook, other major players like GitHub, Shopify, Pinterest, Paypal & Twitter all use GraphQL in some way or another.

Impressively enough, it fits directly in the adoption timeline that Lee Byron, GraphQL’s creator, had in mind a few years ago. The next step according to him? Omnipresence in web platforms. We have every reason to believe him.

Prepare to hear about GraphQL a lot in 2019. Many publications rank it as one of the most important JS trends to keep an eye on in the next few months. Npm itself says that you’ll need to learn it in 2019 & GraphQL experts are already drooling thinking about the bright future of the tech.

But… wait a second here.

Hype is one thing, but one of my colleagues said something about it that I found pretty interesting:

“The general hype around GraphQL has made us forget why it was really cool in the first place.”

It’s true that if intensive public talk can sometimes oversell something (that Birdbox movie, anyone?) it can also overshadow its initial merits.

For us, these pillars for GraphQL are:

1. The GraphQL specification has been developed as a way to define single highly flexible API endpoints giving developers access to complete relational models.
2. It is incredibly powerful because it gives consumers total control over how they want the requested data to be structured, as well as how deep they want to go into entity relations.

In the same vein, a GitHub engineer explains why he can’t wait for GraphQL to be “uncool” in this episode of JAMstack Radio.

What about that old GraphQL vs. REST talk?

I won’t lose myself too long here because it’s also a topic we discussed in our first GraphQL piece and the debate hasn’t really changed.

Of course, the rising GraphQL adoption is forcing us to keep this discussion going but REST APIs are still alive & well and not under any threat of extinction, for now. You can’t put them aside and say that one is the other’s predecessor because they’re simply not of the same nature. They can live together just fine in the same environment.

Still, GraphQL comes as an upgrade for certain functions that weren’t optimal with REST APIs.

2. How headless CMS are leveraging GraphQL

If you’ve paid attention in the last few months, you might have observed a lot of tools adding GraphQL as a built-in feature, or new ones breaking into the market with GraphQL as a selling point.

This list includes:

• Gatsby (SSG) - The popular React-powered static site generator leverages GraphQL to fetch data from multiple sources.
• Gridsome (SSG) - The Vue.js equivalent to Gatsby, also featuring GraphQL.
• GraphCMS - The name says it all. It was probably the first headless CMS to put GraphQL forward.
• Strapi - This neat Node.js headless CMS lets you use REST or GraphQL APIs.
• Unite CMS - Still in beta, this new headless CMS is built on Symfony 4 & GraphQL.
• CannerCMS - An open-source API-driven headless CMS.
• TakeShape - More on this new headless CMS down below.

In this post, I want to focus solely on the headless CMSs in this list. More precisely, how GraphQL is making them better and worthy of your attention.

There are 4 main advantages that I think it’s important to highlight:

→ Better API to retrieve data: The main premise of GraphQL is to offer the capacity for devs to chose exactly what they need from the database and receive that data in a predictable way. Not only that, but you can fetch many resources in a single request. Say goodbye to over bloated server/database requests.

→ Possibility to insert data from external applications: Isn’t it what APIs have always been used for? Sure, but once again GraphQL makes this process more structured and organized. One great thing that headless CMSs enable is modular development. So, when scaling an app you’ll need to plug some external functionalities and GraphQL assures that you’ll only get what you really need from each of them.

→ Great performances: Smaller, more efficient requests to databases and external apps will no doubt be beneficial for your system’s performance.

→ Easy delivery to multiple channels: GraphQL is embracing modern trends. With the rise of mobile, wearable technologies & IoT it’s becoming important to develop APIs that can easily serve multiple channels.

It’s time to move from theory to practice, with TakeShape.io as our guinea pig.

3. What is TakeShape.io?

TakeShape is a new JAMstack-oriented tool that combines the functionalities of a headless CMS, GraphQL API and static site generator.

It’s only a few months old since it was officially launched in September 2018. It caught our attention thanks to their JAMstack-related content and we’ve been eager to try it ever since.

It was built with the premise that “content management shouldn’t be hard”. TakeShape was crafted with developers in mind, giving them a frictionless framework to create projects on. But content crafters won’t be left in the dark, thanks to an intuitive interface and the necessary features to manage content efficiently.

It fully embraces the latest modern development trends, making the best of the built-in GraphQL API and even offering its own static site generator. But, don’t worry, as with every good headless CMS, you can also attach to it the frontend tech of your choice.

The founders also seem to be all-around good guys from the small discussion we’ve had with them prior to building this demo, so I’m really happy to finally dive into it!

#graphql