refactor(gatsby): optimized queries, types and imports (nodejs#2748)

firebase.json

@@ -100,6 +100,16 @@
       "source": "/docs/*",
       "destination": "/api/",
       "type": "301"
+    },
+    {
+      "source": "/api/",
+      "destination": "/api/v18/documentation/",
+      "type": "301"
+    },
+    {
+      "source": "/api/v18/",
+      "destination": "/api/v18/documentation/",
+      "type": "301"
     }
   ]
 }

gatsby-config.js

@@ -5,11 +5,26 @@ require('dotenv').config();
 const config = require('./src/config.json');
 const { localesAsString, defaultLanguage } = require('./locales');
 
-const gatsbyConfig = {
-  flags: {
-    FAST_DEV: true,
-    PARALLEL_SOURCING: true,
+const markdownSources = [
+  'about',
+  'api',
+  'community',
+  'download',
+  'homepage',
+  'learn',
+  'blog',
+];
+
+const gatsbyFsMarkdownSources = markdownSources.map(name => ({
+  resolve: 'gatsby-source-filesystem',
+  options: {
+    name,
+    path: path.resolve(__dirname, `./content/${name}`),
   },
+}));
+
+const gatsbyConfig = {
+  flags: { FAST_DEV: true },
   pathPrefix: process.env.PATH_PREFIX,
   siteMetadata: {
     title: config.title,
@@ -24,10 +39,15 @@ const gatsbyConfig = {
     'Mdx.frontmatter.category': `CategoriesYaml.name`,
   },
   plugins: [
+    'gatsby-plugin-typescript',
     'gatsby-plugin-catch-links',
     '@skagami/gatsby-plugin-dark-mode',
     'gatsby-transformer-yaml',
-    'gatsby-plugin-sharp',
+    'gatsby-plugin-sitemap',
+    // This generates the redirects for the I18N redirects
+    // It also creates meta redirects for any usage of `createRedirect`
+    'gatsby-plugin-meta-redirect',
+    ...gatsbyFsMarkdownSources,
     {
       resolve: 'gatsby-plugin-canonical-urls',
       options: {
@@ -45,76 +65,20 @@ const gatsbyConfig = {
         },
       },
     },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'learn',
-        path: path.resolve(__dirname, './content/learn'),
-      },
-    },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'sites',
-        path: path.resolve(__dirname, './src/pages'),
-      },
-    },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'homepage',
-        path: path.resolve(__dirname, './content/homepage'),
-      },
-    },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'community',
-        path: path.resolve(__dirname, './content/community'),
-      },
-    },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'blog',
-        path: path.resolve(__dirname, './content/blog'),
-      },
-    },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
         name: 'data',
         path: path.resolve(__dirname, './src/data'),
       },
     },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'about',
-        path: path.resolve(__dirname, './content/about'),
-      },
-    },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'download',
-        path: path.resolve(__dirname, './content/download'),
-      },
-    },
-    {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'api',
-        path: path.resolve(__dirname, './content/api'),
-      },
-    },
-    'gatsby-plugin-typescript',
     {
       resolve: 'gatsby-plugin-mdx',
       options: {
         extensions: ['.mdx', '.md'],
+        // Disables Babel Loader for MDX which fastens the build time
+        lessBabel: true,
         gatsbyRemarkPlugins: [
-          { resolve: 'gatsby-remark-copy-linked-files' },
           {
             resolve: 'gatsby-remark-autolink-headers',
             options: {
@@ -125,13 +89,6 @@ const gatsbyConfig = {
               removeAccents: true,
             },
           },
-          {
-            resolve: 'gatsby-remark-images',
-            options: {
-              maxWidth: 590,
-              backgroundColor: 'transparent',
-            },
-          },
         ],
       },
     },
@@ -226,9 +183,6 @@ const gatsbyConfig = {
         cache_busting_mode: 'none',
       },
     },
-    'gatsby-plugin-sitemap',
-    'gatsby-plugin-meta-redirect',
-    'gatsby-plugin-minify-html',
   ],
 };
 

gatsby-node.js

@@ -8,11 +8,13 @@ const createSlug = require('./util-node/createSlug');
 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 createBlogQuery = require('./util-node/createBlogQuery');
 const createLearnQuery = require('./util-node/createLearnQuery');
 const createApiQuery = require('./util-node/createApiQuery');
-const createMarkdownPages = require('./util-node/createMarkdownPages');
+const createBlogPages = require('./util-node/createBlogPages');
+const createLearnPages = require('./util-node/createLearnPages');
 const createApiPages = require('./util-node/createApiPages');
+const generateRedirects = require('./util-node/generateRedirects');
 const redirects = require('./redirects');
 const nodeLocales = require('./locales');
 const { learnPath, apiPath, blogPath } = require('./pathPrefixes');
@@ -69,79 +71,101 @@ exports.createSchemaCustomization = ({ actions }) => {
   createTypes(typeDefs);
 };
 
-exports.createPages = async ({ graphql, actions, reporter }) => {
+exports.createPages = async ({ graphql, actions }) => {
   const { createPage, createRedirect } = actions;
 
   const pageRedirects = { ...redirects };
 
-  const apiTemplate = path.resolve(__dirname, './src/templates/api.tsx');
-  const learnTemplate = path.resolve(__dirname, './src/templates/learn.tsx');
-  const blogTemplate = path.resolve(__dirname, './src/templates/blog.tsx');
-  const blogCategoryTemplate = path.resolve(
-    __dirname,
-    './src/templates/blog-category.tsx'
-  );
+  const templates = path.resolve(__dirname, './src/templates/');
+
+  const apiTemplate = `${templates}/api.tsx`;
+  const learnTemplate = `${templates}/learn.tsx`;
+  const postTemplate = `${templates}/post.tsx`;
+  const blogTemplate = `${templates}/blog.tsx`;
 
-  const [learnResult, pagesResult, apiResult] = await Promise.all([
+  const [learnResult, blogResult, apiResult] = await Promise.all([
     graphql(createLearnQuery),
-    graphql(createPagesQuery),
+    graphql(createBlogQuery),
     graphql(createApiQuery),
   ]);
 
-  if (pagesResult.errors || learnResult.errors || apiResult.errors) {
-    reporter.panicOnBuild('Error while running GraphQL queries.');
-    return;
-  }
-
   const {
-    pages: { edges: pageEdges },
+    pages: { edges: blogEdges },
     categories: { edges: categoryEdges },
-  } = pagesResult.data;
+  } = blogResult.data;
 
   const {
     allMdx: { edges: learnEdges },
   } = learnResult.data;
 
   const {
     pages: { edges: apiEdges },
-    nodeReleases: { nodeReleasesVersion },
+    nodeReleases: { nodeReleasesData, apiAvailableVersions },
   } = apiResult.data;
 
-  const {
-    markdownPages,
-    learnPages,
-    firstLearnPage,
-    navigationData: learNavigationData,
-  } = createMarkdownPages(pageEdges, learnEdges, learnYamlNavigationData);
+  const { blogPages } = createBlogPages(blogEdges);
+
+  const { learnPages, navigationData: learnNavigationData } = createLearnPages(
+    learnEdges,
+    learnYamlNavigationData
+  );
 
   const {
     apiPages,
     latestVersion,
     navigationData: apiNavigationData,
     defaultNavigationRedirects: apiRedirects,
-  } = createApiPages(apiEdges, apiTypesNavigationData, nodeReleasesVersion);
+  } = createApiPages(apiEdges, apiTypesNavigationData, nodeReleasesData);
+
+  createPage({
+    path: learnPath,
+    component: learnTemplate,
+    context: { ...learnPages[0], navigationData: learnNavigationData },
+  });
 
-  if (firstLearnPage) {
+  createPage({
+    path: blogPath,
+    component: blogTemplate,
+    context: { categories: categoryEdges, posts: blogEdges },
+  });
+
+  learnPages.forEach(page => {
     createPage({
-      path: learnPath,
+      path: page.slug,
       component: learnTemplate,
-      context: { ...firstLearnPage, navigationData: learNavigationData },
+      context: { ...page, navigationData: learnNavigationData },
     });
-  }
+  });
 
-  learnPages.forEach(page => {
+  blogPages.forEach(page => {
     createPage({
       path: page.slug,
-      component: learnTemplate,
-      context: { ...page, navigationData: learNavigationData },
+      component: postTemplate,
+      context: { ...page, recent: blogEdges.slice(0, 9) },
     });
   });
 
   categoryEdges.forEach(({ node }) => {
+    const posts = blogEdges.filter(
+      ({ node: item }) => item.fields.categoryName === node.name
+    );
+
     createPage({
       path: `${blogPath}${node.name}/`,
-      component: blogCategoryTemplate,
-      context: { categoryName: node.name },
+      component: blogTemplate,
+      context: { categories: categoryEdges, category: node, posts },
+    });
+  });
+
+  apiPages.forEach(page => {
+    createPage({
+      path: page.slug,
+      component: apiTemplate,
+      context: {
+        ...page,
+        navigationData: apiNavigationData[page.version],
+        nodeReleases: { nodeReleasesData, apiAvailableVersions },
+      },
     });
   });
 
@@ -150,6 +174,11 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   pageRedirects[apiPath] = `${latestApiPath}documentation/`;
   pageRedirects[latestApiPath] = `${latestApiPath}documentation/`;
 
+  // Updates `firebase.json` with new redirects
+  // This is used for our static hosting redirects (npm run build)
+  // When using `npm run serve` or `npm run start` this will not be needed
+  generateRedirects(pageRedirects);
+
   apiRedirects.forEach(({ from, to }) => {
     pageRedirects[`${apiPath}${from}`] = `${apiPath}${to}`;
 
@@ -158,33 +187,13 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     pageRedirects[`${apiPath}${from.slice(0, -1)}.html`] = `${apiPath}${to}`;
   });
 
-  apiPages.forEach(page => {
-    createPage({
-      path: page.slug,
-      component: apiTemplate,
-      context: { ...page, navigationData: apiNavigationData[page.version] },
-    });
-  });
-
-  markdownPages
-    .filter(page => page.realPath.match(blogPath))
-    .forEach(page => {
-      // Blog Pages don't necessary need to be within the `blog` category
-      // But actually inside /content/blog/ section of the repository
-      createPage({
-        path: page.slug,
-        component: blogTemplate,
-        context: page,
-      });
-    });
-
   // Create Redirects for Pages
   Object.keys(pageRedirects).forEach(from => {
     const metadata = {
       fromPath: from,
       toPath: pageRedirects[from],
       isPermanent: true,
-      redirectInBrowser: true,
+      redirectInBrowser: process.env.NODE_ENV === 'development',
       statusCode: 200,
     };