refactor: change the way to query pages data (#18)

Author: ainursharaev

gatsby-theme-woly/gatsby-node.js

@@ -33,8 +33,8 @@ async function createUsagePages({ actions, graphql, reporter }) {
     {
       usages: allMdx {
         nodes {
-          id
           fileAbsolutePath
+          body
         }
       }
     }
@@ -48,46 +48,46 @@ async function createUsagePages({ actions, graphql, reporter }) {
   const component = require.resolve('./src/templates/usage.js');
 
   const groupedMdx = result.data.usages.nodes.reduce(
-    (all, { id, fileAbsolutePath }) => {
+    (all, { fileAbsolutePath, body }) => {
       const [filename, name, category, packageName] = fileAbsolutePath
         .split('/')
         .reverse();
 
-      const key = `${packageName}-${category}-${name}`;
+      const id = `${packageName}-${category}-${name}`;
       const type = path.basename(filename, '.mdx');
 
-      if (!all[key]) {
-        all[key] = {
+      if (!all[id]) {
+        all[id] = {
           id,
           name,
           category,
           package: packageName,
-          ids: [],
-          pages: {},
+          pages: [],
         };
       }
 
-      all[key].ids.push(id);
-      all[key].pages[id] = {
-        name,
-        category,
-        package: packageName,
+      all[id].pages.push({
         type,
-      };
+        meta: {
+          name,
+          category,
+          package: packageName,
+        },
+        body,
+      });
 
       return all;
     },
     {},
   );
 
   Object.values(groupedMdx).forEach(
-    ({ id, name, category, package: p, ids, pages }) => {
+    ({ id, name, category, package: p, pages }) => {
       actions.createPage({
         id,
         path: paths.componentPage({ package: p, category, name }),
         component,
         context: {
-          ids,
           package: p,
           category,
           name,

gatsby-theme-woly/src/templates/usage.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { graphql } from 'gatsby';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { Layout } from '../components/layout';
 import { Tabs } from '../components/tabs';
@@ -8,7 +7,7 @@ import { pageSections } from '../lib/constants';
 
 const getTabData = ({ pages, mapper }) => {
   return mapper.reduce((all, { code, label, renderHeader }) => {
-    const page = pages.find((page) => page.meta.type === code);
+    const page = pages.find((page) => page.type === code);
 
     if (page) {
       all.push({
@@ -23,15 +22,8 @@ const getTabData = ({ pages, mapper }) => {
   }, []);
 };
 
-const ComponentPage = ({ data, pageContext }) => {
-  const pages = data.allMdx.nodes.map(({ id, body }) => {
-    const meta = pageContext.pages[id];
-
-    return {
-      meta,
-      body,
-    };
-  });
+const ComponentPage = ({ pageContext }) => {
+  const { pages } = pageContext;
 
   const tabData = getTabData({ pages, mapper: pageSections });
 
@@ -45,15 +37,4 @@ const ComponentPage = ({ data, pageContext }) => {
   );
 };
 
-export const pageQuery = graphql`
-  query($ids: [String]) {
-    allMdx(filter: { id: { in: $ids } }) {
-      nodes {
-        id
-        body
-      }
-    }
-  }
-`;
-
 export default ComponentPage;