chore: Add slug to the ollypack node fields

newrelic · Jun 4, 2021 · 603e07d · 603e07d
1 parent 6015378
commit 603e07d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -56,7 +56,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       allObservabilityPacks {
         edges {
           node {
-            name
+            fields {
+              slug
+            }
             id
           }
         }
@@ -111,10 +113,10 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   });
 
   allObservabilityPacks.edges.forEach(({ node }) => {
-    const { name, id } = node;
-
-    const slug = `/observability-packs/${slugify(name)}/${id}`;
-    console.log(slug);
+    const {
+      fields: { slug },
+      id,
+    } = node;
 
     createPage({
       path: path.join(slug, '/'),
@@ -189,6 +191,14 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
       value: `/apis/${kebabCase(node.name)}`,
     });
   }
+
+  if (node.internal.type === 'ObservabilityPacks') {
+    createNodeField({
+      node,
+      name: 'slug',
+      value: `/observability-packs/${slugify(node.name)}/${node.id}`,
+    });
+  }
 };
 
 exports.onCreateWebpackConfig = ({ actions, plugins }) => {

diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js
@@ -5,7 +5,6 @@ import DevSiteSeo from '../components/DevSiteSeo';
 import { css } from '@emotion/react';
 import PackTile from '../components/PackTile';
 import PackList from '../components/PackList';
-import slugify from '../utils/slugify';
 import { SearchInput, Button, Dropdown } from '@newrelic/gatsby-theme-newrelic';
 
 const ObservabilityPacksPage = ({ data, location }) => {
@@ -132,7 +131,7 @@ const ObservabilityPacksPage = ({ data, location }) => {
                 featuredImageUrl={
                   imgSrc || 'https://via.placeholder.com/400x275.png?text=Image'
                 }
-                to={`/observability-packs/${slugify(pack.name)}/${pack.id}`}
+                to={`${pack.fields.slug}`}
               />
             );
           })}
@@ -151,6 +150,9 @@ export const pageQuery = graphql`
   query {
     allObservabilityPacks {
       nodes {
+        fields {
+          slug
+        }
         id
         name
         website