Coming up: 14 Jun - Reacticon 4 - Workshops

Yireo - Developer training

Open main menu

8 March 2021

Magento extensions need GraphQL support

Magento extensions need to support GraphQL. A simple statement. I'm not sure how to make more out of it. Perhaps you are familiar with this point and you agree it. Otherwise, keep reading.

Magento 2 goes headless thanks to GraphQL

The main reason why Magento extensions need to support GraphQL has to do with the fact that Magento 2.3.0 introduced a GraphQL API which slowly got expanded upon with other versions. And this GraphQL API is able to act as the glue between a headless storefront and the Magento backend system.

Magento goes headless and this has everything to do with GraphQL.

Storefronts that support GraphQL

To proof this headless concept is working, Magento is working on a Magento PWA Studio - a toolbox with developer aids to let developers build their own React-based app. And this React app is connecting to Magento by using GraphQL.

Hyva Themes - using AlpineJS and TailwindCSS - is not a headless solution, but rather an alternative frontend for Luma. And it also uses GraphQL to communicate with the backend. Other PWA providers like DEITY and FrontCommerce are using GraphQL as well, while actually relying more upon their own GraphQL endpoints. And Vue Storefront supports GraphQL as well: With v1, this involves a switch to swap ElasticSearch for GraphQL and with Next, this is part of the connector architecture.

In short, modern-day storefronts rely upon GraphQL.

How to modern-day extensions support modern-day storefronts

For Magento extensions that alter the behaviour of the Magento frontend, the situation has changed. There no longer is a single frontend, there are numerous. Yes, there is still the Luma theme with its Knockout and RequireJS usage, but it is to be deprecated, difficult to extend and bad for performance. Alternative frontends are a reality. And therefore, extension should add support for this.

However, it is quite a task to supply a Magento extension with frontend support for all those different frontends: Perhaps a React component could be used for DEITY, FrontCommerce and PWA Studio, but a Vue component would be needed for Vue Storefront, an Alpine/Tailwind adoptation for Hyva Themes, etcetera. Of course, an extension could choose to support only the most popular one(s).

Support GraphQL first

In any case, an extension should support GraphQL. Most frontends will be based upon it. And while the current Luma frontend does not make use of it by default, you can connect jQuery to GraphQL anyway.

Is it difficult to create a custom endpoint for GraphQL (or extend existing ones)? To my personal feeling, it is not. You simply need a schema.graphqls file referring to a PHP class implementing the ResolverInterface and you're done. Provided that the rest of your extension is properly coded. For instance, if you currently have a Block class that is fat and pulling in all data directly from models, then indeed refactoring this to support GraphQL is hard. However, if you have a Block or ViewModel that is retrieving data using some other class (a DataProvider?) then connecting that DataProvider to the Resolver will be much easier.

Magento extensions need to support GraphQL. Period.

Posted on 8 March 2021

GraphQL in Magento 2 starts simple - with a GraphQL schema file and a resolver. But there's more to it, like various resolver interfaces, caching, Apollo configuration and much more. We can help you get an understanding of all this through professional training.

Check out our Magento 2 training portfolio

Looking for a training in-house?

Let's get to it!

Do not miss out on what we say

This will be the most interesting spam you've ever read

We don't write too commercial stuff, we focus on the technology (which we love) and we regularly come up with innovative solutions. Via our newsletter, you can keep yourself up to date on all of this coolness. Subscribing only takes seconds.

Sign up for the Yireo newsletter

Extensions

GitHub organizations

Legal information

Other Yireo sites

Get Social

About Yireo