Kickstart your React ecommerce project with the Crystallize GraphQL boilerplate

I remember the pain of starting of my first Server Side Rendered (SSR) React GraphQL isomorphic fetch project (phew, a mouthful). Countless hours went into researching best practices, boilerplates and how to’s. All of those hours were put in to our React GraphQL based ecommerce boilerplate. To install our boilerplate check outGetting started with Crystallize React components.

Production ready React Ecommerce boilerplate

The boilerplate gives you a head start in your next commerce project. All the shiny and important bits your state of the art React application should have is there. It is stripped down to avoid bloat and internet weed. When you open your project in your favorite editor you see a folder structure like this:

  • ./pagesPut all your entry pages here. If you need a “” page, you simply create a file or folder named about in here
  • ./componentsPut all your single components here. Most of your app will be in here
  • ./serverThis is where the ultra-light frontend server is chilling. Its primary function is to render the React app in response to a request
  • ./libLibrary code to enable GraphQL and REST API communication, as well as prop type definitions

At this point all you need to worry about is the ./pages folder.

Fetching your first product using GraphQL

For instance, let’s say you have a Crystallize tenant called demo (shocker). In your Crystallize catalogue you have a category called “products”, containing a product named “awesome chair”. The url to this product will be “”.

Have a look at the /pages/product folder. You will see files;

  • graph-data.js (this is where you fetch your data through GraphQL relative to your url)
  • index.js (This is where you render your product page)
  • styles.js (styles for your product page using styled component)

By default the graph fetches your product relative to your url using the $URL variable, but for now let’s say we only want get data regarding our “awesome chair” product.

The graph query in ./pages/product/graph-data.js should then look like this;

{ catalogue(url:"/products/awesome-chair", tenantID:"demo"){ name link product { id name price_from price variations { variation_sku price_ex_vat stock_count } } }}

The data is passed as a prop to your index where you can display your tailor fit product information. If you want the route to be dynamic, simply use the URL variable instead of a hardcoded path string to the GraphQL call, the router figures out the rest.

Fetching products sets with GraphQL in React

The will come a time when you want to display all the products in your category, like list viewings. To do that you simply target the parent path in the url like this:

{ catalogue(url:"/products", tenantID:"demo"){ name link children { link name product { id name price_from } } }}

GraphQL is basically about selecting fields on objects, so whever you need something from an object, just select it. To get the children from a category you simply call “children” to receive an array of objects. This allows for very specific queries, you only transfer what you use. It is faster.