VOOZH about

URL: https://thenewstack.io/graphql-can-compose-headless-systems-to-boost-user-experience/

⇱ GraphQL Can Compose Headless Systems to Boost User Experience - The New Stack


TNS
SUBSCRIBE
Join our community of software engineering leaders and aspirational developers. Always stay in-the-know by getting the most important news and exclusive content delivered fresh to your inbox to learn more about at-scale software development.
REQUIRED
It seems that you've previously unsubscribed from our newsletter in the past. Click the button below to open the re-subscribe form in a new tab. When you're done, simply close that tab and continue with this form to complete your subscription.
The New Stack does not sell your information or share it with unaffiliated third parties. By continuing, you agree to our Terms of Use and Privacy Policy.
Welcome and thank you for joining The New Stack community!
Please answer a few simple questions to help us deliver the news and resources you are interested in.
REQUIRED
REQUIRED
REQUIRED
REQUIRED
REQUIRED
Great to meet you!
Tell us a bit about your job so we can cover the topics you find most relevant.
REQUIRED
REQUIRED
REQUIRED
REQUIRED
REQUIRED
Welcome!

We’re so glad you’re here. You can expect all the best TNS content to arrive Monday through Friday to keep you on top of the news and at the top of your game.

What’s next?

Check your inbox for a confirmation email where you can adjust your preferences and even join additional groups.

Follow TNS on your favorite social media networks.

Become a TNS follower on LinkedIn.

Check out the latest featured and trending stories while you wait for your first TNS newsletter.

PREV
1 of 2
NEXT
VOXPOP
As a JavaScript developer, what non-React tools do you use most often?
Angular
0%
Astro
0%
Svelte
0%
Vue.js
0%
Other
0%
I only use React
0%
I don't use JavaScript
0%
Thanks for your opinion! Subscribe below to get the final results, published exclusively in our TNS Update newsletter:
NEW! Try Stackie AI
From clobbered drafts to real-time sync
Apr 14th 2026 10:00am, by David Moore
TypeScript 6.0 RC arrives as a bridge to a faster future
Mar 14th 2026 9:00am, by Darryl K. Taft
Mastra empowers web devs to build AI agents in TypeScript
Jan 28th 2026 11:00am, by Loraine Lawson
2023-07-20 07:12:25
GraphQL Can Compose Headless Systems to Boost User Experience
sponsor-stepzen,sponsored-post-contributed,
API Management

GraphQL Can Compose Headless Systems to Boost User Experience

With headless services, using a GraphQL middleware lets you leverage the strength of decoupled services without the hassle of ‘gluing’ data together.
Jul 20th, 2023 7:12am by Roy Derks
👁 Featued image for: GraphQL Can Compose Headless Systems to Boost User Experience
StepZen sponsored this post.

With the rise of APIs, businesses can streamline their operations and automate workflows like never before. Two API technologies that have been gaining a lot of attention are headless (API-first) and GraphQL.

Today’s Software Is Headless

Headless services have become increasingly popular, especially in web development. A “headless” or “API first” service separates the frontend and backend applications, and offers an API instead of a web interface. Building on top of a headless service will improve the frontend user experience as developers can optimize the design and performance of their applications without the constraints of an all-in-one application.

👁 Image

The software of a headless service is decoupled, allowing developers to use the pieces interdependently. For instance, for a headless content management system (CMS) context, companies can use the built-in publishing features but deliver the data to their website developed in-house rather than using a prebuilt and possibly inferior website that comes with a traditional CMS.

This approach has become increasingly popular, allowing companies to create a consistent and seamless customer experience across all channels. For example, retail companies can create a consistent omnichannel experience using different services. But there are also some flaws to working with headless services.

StepZen enables developers to easily build and deploy a single GraphQL API that gets the data they need from multiple backends. The API delivers the right data reliably, irrespective of backend protocols, schemas and authentications. We manage the API so that developers manage zero infrastructure.
Learn More
The latest from StepZen

Headless Data Needs to Be Composed

Usually, companies that adopt a headless service in their stack don’t stick to just one. Imagine storing your product data in one headless service and your content (like blog posts in the CMS example) in another. What happens if you want to combine this data? Relying on headless services could increase technical complexity, as developers often have to “glue” code to connect data stored in different places.

👁 Image

Not only do you have to glue data together, but the data could also be delivered in a different format by the various headless systems you’re using. If these data models don’t align, developers must understand how to connect the data and normalize the data into one structured format. This process can be time-consuming and prone to errors if not done carefully. Also, many developers write this “glue” code directly in the frontend application.

One solution to this problem is using a middleware like GraphQL to consolidate all your headless systems into one unified API.

GraphQL Can Compose Headless Systems

GraphQL is a query language for APIs that Facebook developed. It allows developers to request only the data they need, making API responses faster and more efficient. GraphQL also provides a powerful tool for developers to build APIs and offers much flexibility regarding data structures and relationships. It has become popular among companies that want to unify data from various backend data sources, such as a headless service.

👁 Image

As mentioned before, connecting different layers requires developers to write “glue code,” which can result in technical debt, increased workload and decreased flexibility. But when GraphQL is used as a middleware, the developer can easily manipulate and transform data before it reaches the client application, providing a more efficient and streamlined process. On top of this, GraphQL can be used to “stitch” or “merge” data — often called GraphQL federation.

GraphQL federation allows companies to connect their various headless services while still keeping these services decoupled. Both services don’t have to know the other’s existence, as all relations are defined in the GraphQL middleware. This approach especially shines when both your headless services and GraphQL middleware are delivered as a SaaS, meaning you don’t get the additional overhead of managing your own services.

More companies are building their stack on headless services, allowing them to move quicker than the competition and provide a better (and faster) user experience. When you rely on many headless services, using a GraphQL middleware lets you leverage the strength of having decoupled services without the hassle of “gluing” their data together.

StepZen enables developers to easily build and deploy a single GraphQL API that gets the data they need from multiple backends. The API delivers the right data reliably, irrespective of backend protocols, schemas and authentications. We manage the API so that developers manage zero infrastructure.
Learn More
The latest from StepZen
TRENDING STORIES
Roy Derks is a developer, author and public speaker from the Netherlands. His mission is to make the world a better place through tech by training and inspiring developers worldwide. Currently, he is working with StepZen on a mission to...
Read more from Roy Derks
StepZen sponsored this post.
SHARE THIS STORY
TRENDING STORIES
TNS owner Insight Partners is an investor in: Pragma.
SHARE THIS STORY
TRENDING STORIES
TNS DAILY NEWSLETTER Receive a free roundup of the most recent TNS articles in your inbox each day.
The New Stack does not sell your information or share it with unaffiliated third parties. By continuing, you agree to our Terms of Use and Privacy Policy.