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

• ./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 catalogue 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 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 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.