Extract relative permalinks from Wordpress posts for use as gatsby paths

gatsby-node.js

@@ -60,6 +60,9 @@ exports.createPages = ({ actions, graphql }) => {
                 id
                 slug
                 status
+                fields {
+                  link
+                }
               }
             }
           }
@@ -86,7 +89,7 @@ exports.createPages = ({ actions, graphql }) => {
       _.each(posts, ({ node: post }) => {
         // Create the Gatsby page for this WordPress post
         createPage({
-          path: `/${post.slug}/`,
+          path: post.fields.link,
           component: postTemplate,
           context: {
             id: post.id,
@@ -219,4 +222,13 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
       value,
     })
   }
+
+  if (node.internal.type === 'wordpress__POST') {
+    const link = new URL(node.link).pathname
+    createNodeField({
+      node,
+      name: `link`,
+      value: link,
+    })
+  }
 }

src/components/PostList.js

@@ -19,7 +19,7 @@ export default class IndexPage extends React.Component {
               key={post.id}
             >
               <p>
-                <Link className="has-text-primary" to={post.slug}>
+                <Link className="has-text-primary" to={post.fields.link}>
                   {post.title}
                 </Link>
                 <span> &bull; </span>
@@ -36,7 +36,7 @@ export default class IndexPage extends React.Component {
                     __html: post.excerpt.replace(/<p class="link-more.*/, ''),
                   }}
                 />
-                <Link className="button is-small" to={post.slug}>
+                <Link className="button is-small" to={post.fields.link}>
                   Keep Reading →
                 </Link>
               </div>
@@ -66,6 +66,8 @@ export const pageQuery = graphql`
       }
     }
     date(formatString: "MMMM DD, YYYY")
-    slug
+    fields {
+      link
+    }
   }
 `