GraphCommerce: A Headless E-Commerce Framework for (Magento) Agencies

GraphCommerce: A Headless E-Commerce Framework for (Magento) Agencies

Paul Hachmang
Paul Hachmang
March 29
Magento PWA GraphCommerce

We are delighted to announce GraphCommerce®, which will be available to download from npm soon.

GraphCommerce® was born of our own needs as an e-commerce agency and addresses many issues we think agencies worldwide will recognize.

Our goal: build the frontend that we as developers would like to have and that enables us to build the high-end, high-performance webshops that our customers demand. Based on industry-standard, open-source technology.

During the development process, we learned that the benefits of headless go beyond the technological:

Be ready for the future

Modern Javascript frameworks are the biggest innovation in web development in recent years. They make it possible to build a better user experience, while leaving the codebase open for further development. Especially for large-scale projects.

With increasingly strict (perceived) performance assessments and the newly introduced Core Web Vitals, Google is gently pushing the web the towards embracing these modern technologies by setting high standards.

Standards that will become increasingly difficult to meet using regular technology.

GraphCommerce consists of a combination of great technologies and frameworks including React, Next.js, Typescript, GraphQL, Apollo, which will contribute to keeping your performance metrics on par with for years to come.

Greater independence from Magento

Magento’s vision for the future remains unclear. And to a certain extent, e-commerce agencies will always have some dependency on their platform of choice.

GraphCommerce aims to reduce that dependency to a minimum.

Fetching data from different sources direct, GraphCommerce permits best-of-breed software selection, making Composable Commerce a reality. Implement the CMS, ERP or PIM that meets your business requirements, instead of making your decision based on software compatibility.

And should there ever be a need to choose a different e-commerce solution, it can be done without impacting the headless GraphCommerce frontend.

Rich content for all

Mixing rich-content storytelling pages with e-commerce elements has always been reserved for the high-end brands, as it almost always requires expensive custom implementation.

Until now.

GraphCommerce makes it possible to compose rich-content pages from a variety of content components, direct in GraphCMS, a headless CMS integrated by defa

can add both e-commerce and content components in different formats, in any order, to any page.

Building new components is easy to learn, thanks to Material UI's extensive documentation and the broad variety of components already available.

Building your team is easier

E-commerce specialists are hard to come by and if your agency is bound to a specific platform, sourcing the right one can be quite a challenge.

The React community, however, is huge. Thanks to the wide adoption of React and its many use cases, implementing GraphCommerce significantly eases your developer hunt.

Training talent is easier

Any developer can learn React. There is a vast amount of study material available and thanks to amazing tools like Typescript, learning curves are considerably less steep than for many proprietary, platform-specific frontend technologies.

Besides, the latest generation of developers just out of IT school already has at least a little hands-on experience with modern JavaScript frameworks.

Less sensitive backend

Data synchronization across platforms has been the go-to strategy for over a decade. The results are often good enough, but the risk of problems is high in the long term.

GraphCommerce fetches data direct from its sources. There's no need for slow and sensitive backend imports and exports.

Easier Magento updating

Magento’s updates address both back- and frontend issues, and feature breaking frontend changes almost every quarter. 

A headless GraphCommerce frontend runs on the GraphQL API and is not affected by these updates. 

Any problems that need to be resolved will in future, therefore, be limited to backend only. 

Return on your investment in Magento

Frontend-stack complexity, performance issues and uncertainty about the future have led some to consider alternative e-commerce platforms.

Potentially losing returns on many years of investment in Magento projects, training and knowledge.

GraphCommerce will help you get the best out of Magento for years to come.

No vendor lock-in

We believe in successful, fresh ideas, which is why we've open sourced GraphCommerce: to incorporate yours and build a community. 

We will continue to improve GraphCommerce, with a focus on performance, Magento integration and adding new features.

No need to know Magento

GraphCommerce is also perfect for creative agencies and design studios, since it enables you to build high-end e-commerce stores without hiring Magento developers.

The headless frontend can be developed locally and Magento simply runs in the cloud (hosted by a third party, or Adobe Commerce Cloud).

So, if you want to build your store in-house and outsource Magento backend development only, with GraphCommerce you can.

The front- and backend split makes GraphCommerce a great solution for creative agencies and design studios that want to set up high-end webshops, but have no experience with Magento.

Easy to adopt with current JavaScript framework experience

Modern JavaScript frameworks have given increased creative freedom to design studios for a while now. 

GraphCommerce is easy to adopt for anyone who already knows React and offers lots of interesting features for full-blown e-commerce projects, but also for projects in which e-commerce plays a less prominent role.

GraphCommerce also makes the transition to React easier for creative agencies working with Vue, Angular, or any other frontend framework.

It just works: offering the solutions and developer features you need, like session management, caching, build tools, deployment tools and default interface components.

Try it out!

You can take a look at GraphCommerce at https://graphcommerce.vercel.app/, or read more on our website: https://www.graphcommerce.org/

We will publish the project somewhere the next couple of weeks

If you have questions, please let us know. You can find us in our public Slack community chat.

We hope you will be just as excited about GraphCommerce as we are.