fix: get layouts working with quickstart pages

* The layout keyed off of a value on the mdx pages that we don't have
  access to.
* This updates the layout logic to check for the `layout` field on a
  page to decide which layout to use.
* This also adds an `onCreatePage` lifecycle method to add the `layout`
  field to the index page.

gatsby-node.js

@@ -10,7 +10,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         edges {
           node {
             fields {
-              fileRelativePath
               slug
             }
             id
@@ -39,12 +38,22 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       context: {
         id,
         layout: 'QuickStartLayout',
-        fileRelativePath,
       },
     });
   });
 };
 
+exports.onCreatePage = async ({ page, actions }) => {
+  const { createPage, deletePage } = actions;
+  const oldPage = { ...page };
+
+  if (page.path === '/') {
+    page.context.layout = 'QuickStartLayout';
+  }
+  deletePage(oldPage);
+  createPage(page);
+};
+
 exports.onCreateNode = ({ node, actions }) => {
   const { createNodeField } = actions;
 

package.json

@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "develop": "GATSBY_NEWRELIC_ENV=development gatsby develop",
-    "start": "gatsby develop",
+    "start": "yarn develop",
     "build": "GATSBY_NEWRELIC_ENV=production gatsby build",
     "build:production": "yarn build --prefix-paths",
     "serve": "gatsby serve",

src/layouts/index.js

@@ -3,11 +3,11 @@ import QuickStartLayout from './QuickStartLayout';
 import PropTypes from 'prop-types';
 
 const Layout = ({ children, pageContext }) => {
-  if (pageContext.fileRelativePath.match(/404/)) {
-    return children;
+  if (pageContext.layout === 'QuickStartLayout') {
+    return <QuickStartLayout>{children}</QuickStartLayout>;
   }
 
-  return <QuickStartLayout>{children}</QuickStartLayout>;
+  return <>{children}</>;
 };
 
 Layout.propTypes = {