Using slugs dynamically

gatsby-node.js

@@ -26,7 +26,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
       result.data.allWordpressPage.edges.forEach(({ node }) => {
         createPage({
           path: node.slug,
-          component: path.resolve('./src/pages/page.js'),
+          component: path.resolve('./src/pages/page-default.js'),
+          context: {
+            slug: node.slug,
+          }
         })
       })
 

src/pages/page-default.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+
+class DefaultPage extends Component {
+  render() {
+    const { data } = this.props
+    return (
+      <div>
+        <h1>Specific DefaultPage - {data.wordpressPage.title}</h1>
+        <div dangerouslySetInnerHTML={{
+          __html: data.wordpressPage.content
+        }}
+        />
+      </div>
+    );
+  }
+}
+
+export const query = graphql`
+  query DefaultPageQuery($slug: String!) {
+    wordpressPage(slug: {eq: $slug}) {
+      title
+      slug
+      content
+    }
+  }
+`
+
+export default DefaultPage;

src/pages/page.js

@@ -1,24 +0,0 @@
-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;