Kickstart Your React ecommerce Project with the Crystallize GraphQL Boilerplate

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

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 are already 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:

• ./pages Put all your entry pages route files here. If you need a “https://yoururl.com/about” page, you simply create a file or folder named about in here
• ./page-components The actual file contents required by the route components in /pages
• ./components Put all your single components here. Most of your app will be in here
• ./lib Library code to enable GraphQL and REST API communication shared between the client and the server
• ./lib-api: Shared code for the API serverless functions

For instance, let’s say you have a Crystallize tenant called demo (shocker). In your Crystallize catalog, you have a category called “products”, containing a product named “awesome chair”. The URL to this product will be “http://yoururl.com/products/awesome-chair”.

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 to 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", language: "en") {
    id
    name
    path
    ... on Product {
      defaultVariant {
        price
        stock
      }
    }
  }
}

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.

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", language: "en") {
    children {
      id
      name
      path
      ... on Product {
        defaultVariant {
          price
          stock
        }
      }
    }
  }
}

GraphQL is basically about selecting fields on objects, so whenever 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.