Creating and maintaining a Magento online store, developers constantly look for the most efficient ways to optimize Magento database, media, speed, and overall performance. That’s why transforming eCommerce websites into progressive web apps (PWAs) has become a significant trend in recent years. As new tasks require new technologies, dev teams turn to more flexible, refined, and modern solutions. That’s why GraphQL is now partially superseding REST or SOAP APIs in Magento 2 frontend development and building progressive web applications in particular.
In this article, we’ll refresh several important notions on the topic as well as explain how GraphQL facilitates both the development process and the use of web apps. Finally, we’ll observe the current capabilities and drawbacks of GraphQL in Magento 2.
Important Definitions: GraphQL, Magento 2, PWAs
GraphQL is a query language and runtime for APIs that helps to deliver data from a server to a client. In other words, this is a syntax that determines data queries. It was created by Facebook and released in 2015.
There are at least three main advantages that GraphQL can boast in comparison with REST or SOAP web APIs:
- It allows you to request a specific piece of data and fetches exactly it (no excessive information).
- It provides the opportunity to get all the data from several sources through one request (together with the previous point, this favorably affects a website’s performance).
- It is a data source-independent system; thus, it doesn’t matter where the data is stored to organize its work.
Magento 2 is the latest available update of this famous eCommerce platform. Experts and business owners consider Magento the most suitable CMS for online retailers of medium and large sizes due to its limitless possibilities for customization and scaling. The platform is now owned by Adobe, but there is an open-source version as well.
A progressive web app (PWA) is a website that looks and performs on smartphones like a native app. Its loading speed and UX/UI are enhanced compared to a standard mobile version of a website.
Moreover, thanks to contemporary technologies behind PWAs, these sites have gained the opportunity to operate in offline mode and to be accessible via an icon on a home screen. And these all without the need to download a weighty app (PWAs run in browsers)!
How GraphQL Can Be Wholesome in Magento 2
As mentioned at the beginning of the article, GraphQL aids in building PWAs based on Magento, among other things. For instance, PWA Studio (a toolkit for creating PWAs) already includes numerous GraphQL solutions to ease the developing process related to the API side and unload the system itself.
So, the usage of GraphQL improves the way data is requested from the server and fetched to the client. In practice, when a person visits a website for the very first time, the request to the server will be aimed at receiving general data. But further, when the user looks through the website, GraphQL asks only for some specific information in line with the user’s actions (with REST, there would be a massive chunk of data returned in response to every query). This scheme inevitably speeds up the delivery of data to the user.
This becomes possible thanks to the method by which GraphQL inquires information. With the help of GraphQL, developers can form requests that are as specific as possible and organize them in a way that diminishes the number of server queries themselves.
Currently, GraphQL allows to deal with several primary frontend tasks in Magento (version 2.4.0):
- All product types, payment, and shipping methods are supported;
- The layered navigation is redesigned;
- Reorders are supported;
- Inventory management store pickups are supported.
Major Drawbacks of GraphQL in Magento 2
As of now, the Magento team is working on widening the GraphQL feature set both in B2B and B2C directions. When it comes to the latter, changes are expected in the following sections:
- Order history;
- Gift wrapping and messages;
- Product reviews;
- Wish lists;
- Reward points;
- Saved payment methods;
- and so on.
Then, the main flaw of GraphQL for Magento is the lack of ready-made options. In many cases, missing modules (like some payment methods, wish lists, reviews, and other ones mentioned above) implies crafting custom GraphQL for them from scratch.
As GraphQL (a syntax) lacks functionality, it still cannot be a full substitute for REST (an architecture) if we talk about complex projects. GraphQL is currently more applicable as an extra API tool for boosting the efficiency and agility of development and the performance of progressive web apps built using this instrument.
Start Using GraphQL
So, you now may be considering giving it a try. We definitely recommend you to read detailed side-by-side comparisons first and then experiment with GraphQL in one part of your project. GraphQL can be implemented gradually and used over REST, for instance.
There are several GraphQL APIs available at the moment. The GraphQL developer guide gives clear instructions on how to leverage GraphQL in Magento: how to set an endpoint, query, mutation, and so forth. In the screenshot below, you can see how a sample query and response look:
Many complex projects, including online shops, are being constantly overloaded with requests (too many, too often). Utilizing GraphQL, you can impressively reduce the number of requests made by the client. Thereby the performance on the client side will remarkably improve from the users’ perspective. That’s why Magento developers turn to GraphQL while crafting progressive web apps. In other words, an eCommerce website can gather speed with the help of this solution.
In addition, since it’s a new approach to data processing, GraphQL can increase developers’ productivity. It helps to get rid of adding many access points to the system and write complicated conditional constructs.
Although GraphQL is still not a full-fledged alternative to REST API, it’s already brought much avail in Magento frontend development on the whole and as well as PWA building.