Basic config and layout for fetching, showing wp data with graphql

gatsby-node.js

@@ -17,6 +17,20 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           }
         }
       `
-    )
+    ).then(result => {
+      if (result.errors) {
+        console.log(result.errors)
+        reject(result.errors)
+      }
+
+      result.data.allWordpressPage.edges.forEach(({ node }) => {
+        createPage({
+          path: node.slug,
+          component: path.resolve('./src/pages/page.js'),
+        })
+      })
+
+      resolve()
+    })
   })
 }

src/components/header.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import Link from 'gatsby-link'
+
+const Header = ({ siteTitle }) => (
+  <h1 style={{ margin: 0 }}>
+    <Link
+      to="/"
+      style={{
+        color: 'white',
+        textDecoration: 'none',
+      }}
+    >
+      {siteTitle}
+    </Link>
+  </h1>
+)
+
+export default Header

src/layouts/index.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Helmet from 'react-helmet'
+
+import Header from '../components/header'
+
+const Layout = ({ children, data }) => (
+  <div>
+    <Helmet
+      title={data.site.siteMetadata.title}
+      meta={[
+        { name: 'description', content: 'We code & design great software' },
+        { name: 'keywords', content: 'software, design, coding, programming, code, consulting' },
+      ]}
+    />
+    <Header siteTitle={data.site.siteMetadata.title} />
+    {children()}
+  </div>
+)
+
+Layout.propTypes = {
+  children: PropTypes.func,
+}
+
+export default Layout
+
+export const query = graphql`
+  query SiteTitleQuery {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+  }
+`

src/pages/404.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+const NotFoundPage = () => (
+  <div>
+    <h1>NOT FOUND</h1>
+    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+  </div>
+)
+
+export default NotFoundPage

src/pages/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const IndexPage = () => (
+  <div>
+    <h1>Index page</h1>
+  </div>
+)
+
+export default IndexPage

src/pages/page.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+class Page extends Component {
+  render() {
+    const { data } = this.props
+    return (
+      <div>
+        <h1>Specific Page - {data.wordpressPage.title}</h1>
+      </div>
+    );
+  }
+}
+
+export const query = graphql`
+  query PageQuery {
+    wordpressPage(slug: {eq: "about"}) {
+      title
+      slug
+      content
+    }
+  }
+`
+
+export default Page;