feat: Build pages for all catalogue data (#9)

* refactor: useStaticQuery hook

* feat: Build category pages

* feat: Build collection pages

* feat: Build brands pages

* chore: yarn.lock

* chore: Bump to latest @moltin/gatsby-source-moltin

* refactor: Use path field for page patg when building pages

* fix: add resolvers for nodes that require path

packages/gatsby-theme-moltin/gatsby-node.js

@@ -5,6 +5,15 @@ exports.sourceNodes = ({ actions: { createTypes } }) => {
     type MoltinProduct implements Node {
       path: String!
     }
+    type MoltinCollection implements Node {
+      path: String!
+    }
+    type MoltinCategory implements Node {
+      path: String!
+    }
+    type MoltinBrand implements Node {
+      path: String!
+    }
   `)
 }
 
@@ -17,6 +26,21 @@ exports.createResolvers = ({ createResolvers }, options) => {
         resolve: source => path.join(basePath, 'products', source.slug),
       },
     },
+    MoltinCollection: {
+      path: {
+        resolve: source => path.join(basePath, 'collections', source.slug),
+      },
+    },
+    MoltinCategory: {
+      path: {
+        resolve: source => path.join(basePath, 'categories', source.slug),
+      },
+    },
+    MoltinBrand: {
+      path: {
+        resolve: source => path.join(basePath, 'brands', source.slug),
+      },
+    },
   })
 }
 
@@ -31,6 +55,30 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
           }
         }
       }
+      allCategories: allMoltinCategory {
+        edges {
+          node {
+            id
+            path
+          }
+        }
+      }
+      allCollections: allMoltinCollection {
+        edges {
+          node {
+            id
+            path
+          }
+        }
+      }
+      allBrands: allMoltinBrand {
+        edges {
+          node {
+            id
+            path
+          }
+        }
+      }
     }
   `)
 
@@ -43,4 +91,34 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
       },
     })
   })
+
+  pages.data.allCategories.edges.forEach(({ node: { id, path } }) => {
+    createPage({
+      path,
+      component: require.resolve(`./src/templates/CategoryPage.js`),
+      context: {
+        id,
+      },
+    })
+  })
+
+  pages.data.allCollections.edges.forEach(({ node: { id, path } }) => {
+    createPage({
+      path,
+      component: require.resolve(`./src/templates/CollectionPage.js`),
+      context: {
+        id,
+      },
+    })
+  })
+
+  pages.data.allBrands.edges.forEach(({ node: { id, path } }) => {
+    createPage({
+      path,
+      component: require.resolve(`./src/templates/BrandPage.js`),
+      context: {
+        id,
+      },
+    })
+  })
 }

packages/gatsby-theme-moltin/package.json

@@ -12,7 +12,7 @@
   "author": "Moltin (https://moltin.com)",
   "license": "MIT",
   "dependencies": {
-    "@moltin/gatsby-source-moltin": "^1.3.1",
+    "@moltin/gatsby-source-moltin": "^1.4.0",
     "gatsby-plugin-compile-es6-packages": "^1.1.0",
     "gatsby-plugin-page-creator": "^2.0.13"
   },

packages/gatsby-theme-moltin/src/pages/index.js

@@ -1,25 +1,29 @@
 import React from 'react'
-import { graphql } from 'gatsby'
+import { graphql, useStaticQuery } from 'gatsby'
 
 import ProductGrid from '../components/ProductGrid'
 
-const IndexPage = ({ data: { products } }) => (
-  <ProductGrid products={products.edges.map(({ node: product }) => product)} />
-)
-
-export const query = graphql`
-  query {
-    products: allMoltinProduct {
-      edges {
-        node {
-          id
-          name
-          slug
-          path
+const IndexPage = () => {
+  const { products } = useStaticQuery(graphql`
+    query {
+      products: allMoltinProduct {
+        edges {
+          node {
+            id
+            name
+            slug
+            path
+          }
         }
       }
     }
-  }
-`
+  `)
+
+  return (
+    <ProductGrid
+      products={products.edges.map(({ node: product }) => product)}
+    />
+  )
+}
 
 export default IndexPage

packages/gatsby-theme-moltin/src/templates/BrandPage.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+
+const BrandPage = ({ data: { brand } }) => (
+  <React.Fragment>
+    <h1>{brand.name}</h1>
+    <p>{brand.description}</p>
+  </React.Fragment>
+)
+
+export const query = graphql`
+  query($id: String!) {
+    brand: moltinBrand(id: { eq: $id }) {
+      id
+      name
+      description
+    }
+  }
+`
+
+export default BrandPage

packages/gatsby-theme-moltin/src/templates/CategoryPage.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+
+const CategoryPage = ({ data: { category } }) => (
+  <React.Fragment>
+    <h1>{category.name}</h1>
+    <p>{category.description}</p>
+  </React.Fragment>
+)
+
+export const query = graphql`
+  query($id: String!) {
+    category: moltinCategory(id: { eq: $id }) {
+      id
+      name
+      description
+    }
+  }
+`
+
+export default CategoryPage

packages/gatsby-theme-moltin/src/templates/CollectionPage.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+
+const CollectionPage = ({ data: { collection } }) => (
+  <React.Fragment>
+    <h1>{collection.name}</h1>
+    <p>{collection.description}</p>
+  </React.Fragment>
+)
+
+export const query = graphql`
+  query($id: String!) {
+    collection: moltinCollection(id: { eq: $id }) {
+      id
+      name
+      description
+    }
+  }
+`
+
+export default CollectionPage