Gatsby eCommerce

Why I like Gatsby + eCommerce

Gatsby is a static site generator that uses React and GraphQL to create high-performance, blazing-fast websites. While Gatsby itself is not an eCommerce platform, it can be used to build eCommerce websites effectively in combination with other technologies and platforms.

GraphQL: Gatsby uses GraphQL for data fetching, which allows you to pull in product information and other data from various sources and APIs, making it flexible and efficient.

Plugins: The community has made many awesome plugins which run during build time so they do not affect the performance for the end user, great for PageSpeed which is important for eCommerce.

What makes it challenging

There is unfortunately a lack of available up to date resources on this topic. The only maintained fully working template I could find for this is Shopify + Gatsby.

An experienced developer can take what is already out there and update it to work with the latest version of the framework in a reasonable amount of time, but there is a lack of resources out there for junior developers learning the ropes.

Projects I have worked on

I have worked on many large scale eCommerce projects of varying sizes and tech stacks. I have had the pleasure of working on a couple of Gatsby sites as well.

Gatsby + WooCommerce

There is one in particular which I took a major lead role for the technical side of development. This was a Gatsby + WooCommerce project with login, responsive images, hundreds of products and numerous articles.

For this project I wrote my own custom source plugin for WordPress with PHP, and integrated it with Gatsby Node in order to serve slim data to the front-end. By doing this instead of using source plugins already out there I managed to scale back on the amount of data fetched for each page, I also could handle all the transformations in the back-end so front-end developers did not have to worry about mapping through data in the browser.

Gatsby + Centra

Centra is a popular headless eCommerce solution that aims to target medium to large eCommerce companies. I have had the pleasure to help bring these web stores to life. Using my knowledge from setting up the Gatsby + WooCommerce site from scratch I have helped in everything from advanced GraphQL, to debugging issues in Gatsby's Node API.

What I have learned

A common pitfall is underestimating the power of GraphQL. GraphQL is an integral part of what makes Gatsby so great. When working with large amounts of data, parsing through that every build cycle in Node.js is not only expensive, but wastes time and causes issues in the long run.

Source plugins can be great, but sometimes doing it yourself is simply better, if you have the time. A lot of times I find source plugins stringify too much data instead of adding proper types. This means you will lose a lot of what makes Gatsby powerful.