Is it possible to use GraphQL with Spartacus (Angular)?

Problem/Question: 

How can we use GraphQL with Spartacus which is a library on top of AngularJS? 

Is it even possible to use GraphQL with Spartacus (Angular)?

Background: 

The PWA-enabled (Progressive Web App) Single Page Application Spartacus is based on so-called libraries, which can be easily expanded and decoupled from the SAP Commerce Cloud. Spartacus is implemented in JavaScript (more precisely: TypeScript) and Angular to be well prepared for the future. It uses Commerce REST API to communicate with SAP Commerce Cloud. Furthermore, it is an open-source Project which can be viewed on GitHub. Summing it up, Spartacus uses REST API to consume data.  

GraphQL is a query language for your API, and a server-side runtime for executing queries using a type system you define for your data. It hides the logic of our backend and exposes only specific properties or objects needed for certain API call. In a system like REST, you can only pass a single set of arguments – the query parameters and URL segments in your request. But in GraphQL, every field and nested object can get its own set of arguments, making GraphQL a complete replacement for multiple API fetches.

Due to its multiple benefits, we are using GraphQL also in other projects with our self-implemented React storefronts. So, we also started thinking to implement GraphQL with Spartacus. In the following, I will evaluate if there are benefits or drawbacks for Spartacus. 

Explanation & Discussion of GraphQL with Spartacus: 

When we are using Spartacus’ latest version we will be having the angular version between 12.0.5 and 13 as shown in the image below. You can find more information about the versions in the following Spartacus-Documentation. With the angular version it is difficult to find a compatible version of ‘Apollo GraphQL Angular’ but the 2.6.0 version of Apollo GraphQL Angular works perfectly with these specific Angular versions. 

As Spartacus is used as npm package – which can be seen in the image below – it is never recommended to make changes to this npm package. If we try to change endpoints to GraphQL, we will have to change it for at least one whole module due to the structure of Spartacus’ npm package. In addition, it will take a lot of time. What is more, there can be many corner cases which can cause errors. In the end, the application can break as it will need a lot of testing and a lot of time. It will never be recommended to change REST API’s to GraphQL in case of Spartacus as we will not be able to get the benefits offered by GraphQL in this specific scenario. 

Conclusion – GraphQL with Spartacus: 

GraphQL is a very useful query language to replace REST API’s with many types of storefronts, React stores, Angular apps and it adds value to our projects. Nevertheless, it is not a good practice to use GraphQL with Spartacus (Angular) as it will increase the complexity of the project and we will not be able to achieve all fruits offered by GraphQL.  

Here are some key drawbacks using GraphQL with Spartacus (Angular):  

  • Time Consuming 
  • Enhanced Complexity 
  • High effort to make Spartacus GraphQL compatible
  • Invasive code changes to Spartacus required, making maintenance much more difficult and costly

If you are looking into future-proof and modern technologies like GraphQL and want to replace your old Spartacus storefront with modern storefronts and technologies, we would love to help you out in this regard. 

Written by Muhammad Arslan Siddique

P.S. You can find more articles from our team here.