refactor(gatsby): Get list of /dev-404-page/ pages via graphql (#13186)

* use graphql to get dev-404-page list of pages * preload 404.html in gatbsy develop
gatsbyjs · Apr 16, 2019 · e9e6d4e · e9e6d4e
1 parent 12979d5
commit e9e6d4e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 48 deletions.
diff --git a/packages/gatsby/cache-dir/app.js b/packages/gatsby/cache-dir/app.js
@@ -48,8 +48,11 @@ apiRunnerAsync(`onClientEntry`).then(() => {
 
   loader.addPagesArray(pages)
   loader.addDevRequires(syncRequires)
-
-  loader.getResourcesForPathname(window.location.pathname).then(() => {
+  Promise.all([
+    loader.getResourcesForPathname(`/dev-404-page/`),
+    loader.getResourcesForPathname(`/404.html`),
+    loader.getResourcesForPathname(window.location.pathname),
+  ]).then(() => {
     const preferDefault = m => (m && m.default) || m
     let Root = preferDefault(require(`./root`))
     domReady(() => {

diff --git a/packages/gatsby/cache-dir/json-store.js b/packages/gatsby/cache-dir/json-store.js
@@ -83,14 +83,13 @@ class JSONStore extends React.Component {
   render() {
     const data = this.state.pageQueryData[getPathFromProps(this.props)]
     // eslint-disable-next-line
-    const { pages, ...propsWithoutPages } = this.props
     if (!data) {
       return <div />
     }
 
     return (
       <StaticQueryContext.Provider value={this.state.staticQueryData}>
-        <PageRenderer {...propsWithoutPages} {...data} />
+        <PageRenderer {...this.props} {...data} />
       </StaticQueryContext.Provider>
     )
   }

diff --git a/packages/gatsby/cache-dir/public-page-renderer-dev.js b/packages/gatsby/cache-dir/public-page-renderer-dev.js
@@ -1,14 +1,12 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-import pages from "./pages.json"
 import loader from "./loader"
 import JSONStore from "./json-store"
 
 const DevPageRenderer = ({ location }) => {
   const pageResources = loader.getResourcesForPathnameSync(location.pathname)
   return React.createElement(JSONStore, {
-    pages,
     location,
     pageResources,
   })

diff --git a/packages/gatsby/cache-dir/root.js b/packages/gatsby/cache-dir/root.js
@@ -8,8 +8,6 @@ import {
   RouteUpdates,
 } from "./navigation"
 import { apiRunner } from "./api-runner-browser"
-import syncRequires from "./sync-requires"
-import pages from "./pages.json"
 import loader from "./loader"
 import JSONStore from "./json-store"
 import EnsureResources from "./ensure-resources"
@@ -52,46 +50,34 @@ class RouteHandler extends React.Component {
                 location={location}
                 shouldUpdateScroll={shouldUpdateScroll}
               >
-                <JSONStore
-                  pages={pages}
-                  {...this.props}
-                  {...locationAndPageResources}
-                />
+                <JSONStore {...this.props} {...locationAndPageResources} />
               </ScrollContext>
             </RouteUpdates>
           )}
         </EnsureResources>
       )
     } else {
-      const dev404Page = pages.find(p => /^\/dev-404-page\/?$/.test(p.path))
-      const Dev404Page = syncRequires.components[dev404Page.componentChunkName]
-
-      if (!loader.getPage(`/404.html`)) {
-        return (
-          <RouteUpdates location={location}>
-            <Dev404Page pages={pages} {...this.props} />
-          </RouteUpdates>
+      const dev404PageResources = loader.getResourcesForPathnameSync(
+        `/dev-404-page/`
+      )
+      const real404PageResources = loader.getResourcesForPathnameSync(
+        `/404.html`
+      )
+      let custom404
+      if (real404PageResources) {
+        custom404 = (
+          <JSONStore {...this.props} pageResources={real404PageResources} />
         )
       }
 
       return (
-        <EnsureResources location={location}>
-          {locationAndPageResources => (
-            <RouteUpdates location={location}>
-              <Dev404Page
-                pages={pages}
-                custom404={
-                  <JSONStore
-                    pages={pages}
-                    {...this.props}
-                    {...locationAndPageResources}
-                  />
-                }
-                {...this.props}
-              />
-            </RouteUpdates>
-          )}
-        </EnsureResources>
+        <RouteUpdates location={location}>
+          <JSONStore
+            location={location}
+            pageResources={dev404PageResources}
+            custom404={custom404}
+          />
+        </RouteUpdates>
       )
     }
   }

diff --git a/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js b/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js
@@ -1,10 +1,10 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { Link } from "gatsby"
+import { graphql, Link } from "gatsby"
 
 class Dev404Page extends React.Component {
   static propTypes = {
-    pages: PropTypes.arrayOf(PropTypes.object),
+    data: PropTypes.object,
     custom404: PropTypes.element,
     location: PropTypes.object,
   }
@@ -21,9 +21,8 @@ class Dev404Page extends React.Component {
 
   render() {
     const { pathname } = this.props.location
-    const pages = this.props.pages.filter(
-      p => !/^\/dev-404-page\/$/.test(p.path)
-    )
+    const { data } = this.props
+    const pagePaths = data.allSitePage.nodes.map(node => node.path)
     let newFilePath
     if (pathname === `/`) {
       newFilePath = `src/pages/index.js`
@@ -62,17 +61,17 @@ class Dev404Page extends React.Component {
           and this page will automatically refresh to show the new page
           component you created.
         </p>
-        {pages.length > 0 && (
+        {pagePaths.length > 0 && (
           <div>
             <p>
               If you were trying to reach another page, perhaps you can find it
               below.
             </p>
-            <h2>Pages ({pages.length})</h2>
+            <h2>Pages ({pagePaths.length})</h2>
             <ul>
-              {pages.map(page => (
-                <li key={page.path}>
-                  <Link to={page.path}>{page.path}</Link>
+              {pagePaths.map(pagePath => (
+                <li key={pagePath}>
+                  <Link to={pagePath}>{pagePath}</Link>
                 </li>
               ))}
             </ul>
@@ -84,3 +83,13 @@ class Dev404Page extends React.Component {
 }
 
 export default Dev404Page
+
+export const pagesQuery = graphql`
+  query PagesQuery {
+    allSitePage(filter: { path: { ne: "/dev-404-page/" } }) {
+      nodes {
+        path
+      }
+    }
+  }
+`