fix(page-creation): refactored how we create pages to permanently fix… (

nodejs#2635)

gatsby-node.js

@@ -7,6 +7,7 @@ const getNodeReleasesData = require('./util-node/getNodeReleasesData');
 const getBannersData = require('./util-node/getBannersData');
 const getNvmData = require('./util-node/getNvmData');
 const createPagesQuery = require('./util-node/createPagesQuery');
+const createLearnQuery = require('./util-node/createLearnQuery');
 const createMarkdownPages = require('./util-node/createMarkdownPages');
 const redirects = require('./util-node/redirects');
 
@@ -43,13 +44,6 @@ exports.createSchemaCustomization = ({ actions }) => {
 exports.createPages = async ({ graphql, actions, reporter }) => {
   const { createPage, createRedirect } = actions;
 
-  const result = await graphql(createPagesQuery);
-
-  if (result.errors) {
-    reporter.panicOnBuild('Error while running "createPages" GraphQL query.');
-    return;
-  }
-
   Object.keys(redirects).forEach(from => {
     createRedirect({
       fromPath: from,
@@ -62,26 +56,44 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   const docTemplate = path.resolve('./src/templates/learn.tsx');
   const blogTemplate = path.resolve('./src/templates/blog.tsx');
 
-  const { edges } = result.data.allMdx;
+  const [learnResult, pagesResult] = await Promise.all([
+    graphql(createLearnQuery),
+    graphql(createPagesQuery),
+  ]);
 
-  const { markdownPages, navigationData } = createMarkdownPages(
-    edges,
-    learnYamlNavigationData
-  );
+  if (pagesResult.errors || learnResult.errors) {
+    reporter.panicOnBuild('Error while running GraphQL queries.');
+    return;
+  }
 
-  const learnNavigationEntries = Object.keys(navigationData);
+  const { markdownPages, learnPages, firstLearnPage, navigationData } =
+    createMarkdownPages(
+      pagesResult.data.allMdx.edges,
+      learnResult.data.allMdx.edges,
+      learnYamlNavigationData
+    );
+
+  if (firstLearnPage) {
+    createPage({
+      path: `/learn/`,
+      component: docTemplate,
+      context: { ...firstLearnPage, navigationData },
+    });
+  }
 
-  if (learnNavigationEntries.length) {
-    const firstSectionPages = navigationData[learnNavigationEntries[0]].data;
+  learnPages.forEach(page => {
+    createPage({
+      path: `/learn/${page.slug}`,
+      component: docTemplate,
+      context: { ...page, navigationData },
+    });
 
-    if (firstSectionPages.length) {
-      createPage({
-        path: `/learn/`,
-        component: docTemplate,
-        context: { ...firstSectionPages[0], navigationData },
-      });
-    }
-  }
+    createRedirect({
+      fromPath: `/${page.slug}`,
+      toPath: `/learn/${page.slug}`,
+      isPermanent: true,
+    });
+  });
 
   markdownPages.forEach(page => {
     // Blog Pages don't necessary need to be within the `blog` category
@@ -92,21 +104,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
         component: blogTemplate,
         context: page,
       });
-      return;
-    }
-
-    if (page.category === 'learn') {
-      createPage({
-        path: `/learn/${page.slug}`,
-        component: docTemplate,
-        context: { ...page, navigationData },
-      });
-
-      createRedirect({
-        fromPath: `/${page.slug}`,
-        toPath: `/learn/${page.slug}`,
-        isPermanent: true,
-      });
     }
   });
 };

util-node/createLearnQuery.js

@@ -0,0 +1,54 @@
+module.exports = `
+{
+  allMdx(
+    filter: {
+      fields: {
+        categoryName: { eq: "learn" }
+      }
+    }
+    sort: { fields: [fileAbsolutePath], order: ASC }
+  ) {
+    edges {
+      node {
+        id
+        fileAbsolutePath
+        body
+        parent {
+          ... on File {
+            relativePath
+          }
+        }
+        frontmatter {
+          title
+          description
+          authors
+          section
+          category {
+            name
+          }
+        }
+        fields {
+          slug
+          categoryName
+        }
+      }
+      next {
+        frontmatter {
+          title
+        }
+        fields {
+          slug
+        }
+      }
+      previous {
+        frontmatter {
+          title
+        }
+        fields {
+          slug
+        }
+      }
+    }
+  }
+}
+`;

util-node/createMarkdownPages.js

@@ -6,12 +6,8 @@ function getYamlPageIdentifier(relativePath) {
     : relativePath.replace(/(\.[a-z]+)?\.(mdx|md)/, '');
 }
 
-function createLearnPages(edges, yamlNavigationData) {
-  const navigationData = {};
-  const markdownPages = [];
-
-  // Handles the parsing of all Markdown Pages
-  edges.forEach(({ node }, index) => {
+function iterateEdges(edges) {
+  function updateMarkdownPage({ node }, index) {
     const {
       fields: { slug, categoryName },
       parent: { relativePath },
@@ -42,28 +38,29 @@ function createLearnPages(edges, yamlNavigationData) {
       };
     }
 
-    markdownPages.push({
+    return {
       slug,
       title,
       realPath: fileAbsolutePath || '',
       next: nextNodeData,
       previous: previousNodeData,
       relativePath,
       category: categoryName,
-    });
-  });
+    };
+  }
 
-  // We collect all pages that have category set to Learn
-  // As we want to build a navigation data for learn
-  // Then we get their unique identifiers based on the relativePath
-  // To match the ones defined on `src/data/learn.yaml`
-  const learnPages = markdownPages
-    .filter(page => page.category === 'learn')
-    .reduce((acc, page) => {
-      const pageId = getYamlPageIdentifier(page.relativePath);
+  return edges.map(updateMarkdownPage);
+}
 
-      return { ...acc, [pageId]: page };
-    }, {});
+function createMarkdownPages(pagesEdges, learnEdges, yamlNavigationData) {
+  const learnPages = [];
+  const navigationData = {};
+
+  // Iterates the non-Learn edges and transforms them in Pages
+  const markdownPages = iterateEdges(pagesEdges);
+
+  const getLearnEdgeByPageId = pageId => edge =>
+    getYamlPageIdentifier(edge.node.parent.relativePath) === pageId;
 
   // Handles the Navigation Data only of Learn pages
   yamlNavigationData.forEach(({ section, items }) => {
@@ -74,12 +71,24 @@ function createLearnPages(edges, yamlNavigationData) {
 
     // This adds the items to the navigation section data based on the order defined within the YAML file
     // If the page doesn't exist it will be set as null and then removed via Array.filter()
-    navigationData[section].data = items
-      .map(pageId => learnPages[pageId] || null)
-      .filter(page => page !== null);
+    navigationData[section].data = iterateEdges(
+      items
+        // Iterates the items of the section and retrieve their respective edges
+        // then we transform them into pages and add to the navigation data
+        .map(pageId => learnEdges.find(getLearnEdgeByPageId(pageId)))
+        .filter(edge => edge && edge.node)
+    );
+
+    // Then we push them to the resulting learn pages object
+    learnPages.push(...navigationData[section].data);
   });
 
-  return { markdownPages, navigationData };
+  return {
+    markdownPages,
+    learnPages,
+    navigationData,
+    firstLearnPage: learnPages[0],
+  };
 }
 
-module.exports = createLearnPages;
+module.exports = createMarkdownPages;

util-node/createPagesQuery.js

@@ -18,6 +18,7 @@ module.exports = `
             "package-manager"
           ]
         }
+        categoryName: { ne: "learn" }
       }
     }
     sort: { fields: [fileAbsolutePath], order: ASC }