Select by ID instead of path

gatsby-config.js

@@ -34,4 +34,4 @@ module.exports = {
       },
     },
   ],
-};
+}

gatsby-node.js

@@ -1,4 +1,4 @@
-const path = require("path")
+const path = require('path')
 
 exports.createPages = ({ boundActionCreators, graphql }) => {
   const { createPage } = boundActionCreators
@@ -8,6 +8,7 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
       allMarkdownRemark(limit: 1000) {
         edges {
           node {
+            id
             frontmatter {
               path
               templateKey
@@ -22,15 +23,18 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
       return Promise.reject(result.errors)
     }
 
-    return result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-      const pagePath = node.frontmatter.path
+    result.data.allMarkdownRemark.edges.forEach(edge => {
+      const id = edge.node.id
+      const pagePath = edge.node.frontmatter.path
       createPage({
         path: pagePath,
         component: path.resolve(
-          `src/templates/${String(node.frontmatter.templateKey)}.js`
+          `src/templates/${String(edge.node.frontmatter.templateKey)}.js`
         ),
         // additional data can be passed via context
-        context: {},
+        context: {
+          id,
+        },
       })
     })
   })

package.json

@@ -29,7 +29,7 @@
     "build": "gatsby build",
     "develop": "gatsby develop",
     "serve": "gatsby serve",
-    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write src/**/*.js",
+    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {

src/cms/preview-templates/AboutPagePreview.js

@@ -1,8 +1,11 @@
-import React from 'react';
-import { AboutPageTemplate } from '../../templates/about-page';
+import React from 'react'
+import { AboutPageTemplate } from '../../templates/about-page'
 
 const AboutPagePreview = ({ entry, widgetFor }) => (
-  <AboutPageTemplate title={entry.getIn(['data', 'title'])} content={widgetFor('body')} />
-);
+  <AboutPageTemplate
+    title={entry.getIn(['data', 'title'])}
+    content={widgetFor('body')}
+  />
+)
 
-export default AboutPagePreview;
+export default AboutPagePreview

src/cms/preview-templates/BlogPostPreview.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import { BlogPostTemplate } from '../../templates/blog-post';
+import React from 'react'
+import { BlogPostTemplate } from '../../templates/blog-post'
 
 const BlogPostPreview = ({ entry, widgetFor }) => (
   <BlogPostTemplate
     content={widgetFor('body')}
     description={entry.getIn(['data', 'description'])}
     title={entry.getIn(['data', 'title'])}
   />
-);
+)
 
-export default BlogPostPreview;
+export default BlogPostPreview

src/cms/preview-templates/ProductPagePreview.js

@@ -1,15 +1,15 @@
-import React from 'react';
-import { ProductPageTemplate } from '../../templates/product-page';
+import React from 'react'
+import { ProductPageTemplate } from '../../templates/product-page'
 
 const ProductPagePreview = ({ entry, getAsset }) => {
-  const entryBlurbs = entry.getIn(['data', 'intro', 'blurbs']);
-  const blurbs = entryBlurbs ? entryBlurbs.toJS() : [];
+  const entryBlurbs = entry.getIn(['data', 'intro', 'blurbs'])
+  const blurbs = entryBlurbs ? entryBlurbs.toJS() : []
 
-  const entryTestimonials = entry.getIn(['data', 'testimonials']);
-  const testimonials = entryTestimonials ? entryTestimonials.toJS() : [];
+  const entryTestimonials = entry.getIn(['data', 'testimonials'])
+  const testimonials = entryTestimonials ? entryTestimonials.toJS() : []
 
-  const entryPricingPlans = entry.getIn(['data', 'pricing', 'plans']);
-  const pricingPlans = entryPricingPlans ? entryPricingPlans.toJS() : [];
+  const entryPricingPlans = entry.getIn(['data', 'pricing', 'plans'])
+  const pricingPlans = entryPricingPlans ? entryPricingPlans.toJS() : []
 
   return (
     <ProductPageTemplate
@@ -42,7 +42,7 @@ const ProductPagePreview = ({ entry, getAsset }) => {
         plans: pricingPlans,
       }}
     />
-  );
-};
+  )
+}
 
-export default ProductPagePreview;
+export default ProductPagePreview

src/layouts/all.sass

@@ -1,6 +1,6 @@
 @import "~bulma/sass/utilities/initial-variables"
 
-// Config
+// Config vars
 $kaldi-red: #FD461E
 $kaldi-red-invert: #fff
 

src/templates/about-page.js

@@ -35,8 +35,8 @@ export default ({ data }) => {
 }
 
 export const aboutPageQuery = graphql`
-  query AboutPage($path: String!) {
-    markdownRemark(frontmatter: { path: { eq: $path } }) {
+  query AboutPage($id: String!) {
+    markdownRemark(id: { eq: $id }) {
       html
       frontmatter {
         path

src/templates/blog-post.js

@@ -44,8 +44,9 @@ export default props => {
 }
 
 export const pageQuery = graphql`
-  query BlogPostByPath($path: String!) {
-    markdownRemark(frontmatter: { path: { eq: $path } }) {
+  query BlogPostByID($id: String!) {
+    markdownRemark(id: { eq: $id }) {
+      id
       html
       frontmatter {
         path

src/templates/product-page.js

@@ -123,8 +123,8 @@ export default ({ data }) => {
 }
 
 export const productPageQuery = graphql`
-  query ProductPage($path: String!) {
-    markdownRemark(frontmatter: { path: { eq: $path } }) {
+  query ProductPage($id: String!) {
+    markdownRemark(id: { eq: $id }) {
       frontmatter {
         title
         path