WordPress as a headless CMS and React.js

Process & Challenges

In late 2019, we started working on a project which was a new version of an existing E-Commerce solution of a grocery shop here in Pristina. Its previous version was built using WordPress & WooCommerce in order to make use of their set of tools & features. The challenge here was that the clients’ requirements were to build an extremely fast site. Also, have a very user-friendly interface (so it would be easier for customers to keep adding stuff to their cart :)). Given all the requirements & experience in developing WooCommerce sites we had, we knew that this wouldn’t be an easy task to finish. 

Solution

We decided to keep using WordPress as our back-end, so we wouldn’t lose any important data from the previous version. So, we started looking at what we could do in order to improve from the front-end side. We started thinking about making use of one of the most popular Javascript libraries. It was React.js to do the UI part. However, we were in doubt about how fast & easy would be the workflow on making use of the WordPress API. We continued searching for ways we could make it work. While looking for this, we happened to find a video that showed us a very new way of using WordPress. It was to access its API not from its REST endpoints but via GraphQL from a plugin called WPGraphQL. That was very interesting to find but what was still holding us back as if it had enough WooCommerce support. Just for that, there was an extension of this plugin called WooGraphQL.

That was super awesome to find out! After we started working with these two, it was an immediate impression of how easy it was for us to do the front-end side using React and GraphQL endpoint to retrieve just the data that we wanted. 

Output

This solution happened to suit this project very well and the client was very happy with the end result. We learned quite a lot along the way. Not to mention the friendly support from their respective maintainers(Jason Bahl & Geoffrey K Taylor) & its community on Slack. After this project, we started implementing this tech-stack in more exciting projects. We can’t wait to share them with you in the coming months!

Tech stack used:

-React

-WordPress

-GraphQL