Create nested URLs for pages

GatsbyCentral · Oct 30, 2018 · e494293 · e494293
1 parent 158673e
commit e494293
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -1,6 +1,41 @@
 const path = require('path')
 const { createFilePath } = require('gatsby-source-filesystem')
 
+/**
+ * Create nested paths
+ * e.g., /grandparent/parent/node-slug
+ * and add to node
+ */
+exports.sourceNodes = ({ getNodes, actions }) => {
+  const { createNodeField } = actions
+
+  // Grag all page nodes
+  const pageNodes = getNodes().filter(
+    node => node.internal.type === 'wordpress__PAGE'
+  )
+
+  // Build each node's full path
+  pageNodes.forEach(node => {
+    // Save the original node for use down below
+    const original = node
+    // Start with the node's slug
+    let newSlug = `/${node.slug}/`
+    // Recursively check for a parent and prepend parent's slug to newSlug
+    while (node.wordpress_parent) {
+      node = pageNodes.find(
+        parentNode => node.wordpress_parent === parentNode.wordpress_id
+      )
+      newSlug = `/${node.slug}${newSlug}`
+    }
+    // Add full path to node -- available at node.fields.path
+    createNodeField({
+      node: original,
+      name: `path`,
+      value: newSlug,
+    })
+  })
+}
+
 exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions
 
@@ -10,7 +45,9 @@ exports.createPages = ({ actions, graphql }) => {
         edges {
           node {
             id
-            slug
+            fields {
+              path
+            }
             status
             template
           }
@@ -35,7 +72,7 @@ exports.createPages = ({ actions, graphql }) => {
 
       pages.forEach(({ node }) => {
         createPage({
-          path: `/${node.slug}/`,
+          path: node.fields.path,
           component: pageTemplate,
           context: {
             id: node.id,

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -12,7 +12,9 @@ const Navbar = () => (
             node {
               id
               title
-              slug
+              fields {
+                path
+              }
             }
           }
         }
@@ -32,7 +34,7 @@ const Navbar = () => (
             {data.allWordpressPage.edges.map(edge => (
               <Link
                 className="navbar-item"
-                to={edge.node.slug}
+                to={edge.node.fields.path}
                 key={edge.node.id}
               >
                 {edge.node.title}