feat(develop): add explicit express handler for page-data requests

e2e-tests/development-runtime/cypress/integration/navigation/redirect.js

@@ -90,6 +90,9 @@ describe(`redirect`, () => {
         pagePath: `/404.html`,
         filter: `page-data`,
       })
+      cy.task(`blockPageComponent`, {
+        path: `pages/404.js`,
+      })
     })
 
     after(() => {

e2e-tests/development-runtime/cypress/plugins/block-resources.js

@@ -5,7 +5,9 @@ const fs = require(`fs-extra`)
 const path = require(`path`)
 const glob = require(`glob`)
 
-const publicDir = path.join(__dirname, `..`, `..`, `public`)
+const siteDir = path.join(__dirname, `..`, `..`)
+const srcDir = path.join(siteDir, `src`)
+const publicDir = path.join(siteDir, `public`)
 
 const moveAsset = (from, to) => {
   const fromExists = fs.existsSync(from)
@@ -18,7 +20,7 @@ const moveAsset = (from, to) => {
   }
 }
 
-const restorePageData = hiddenPath => {
+const restoreAsset = hiddenPath => {
   if (path.basename(hiddenPath).charAt(0) !== `_`) {
     throw new Error(`hiddenPath should have _ prefix`)
   }
@@ -51,10 +53,28 @@ const blockAssetsForPage = ({ pagePath, filter }) => {
   return null
 }
 
+function blockPageComponent({ path: pageComponentPath }) {
+  const hiddenPath = path.join(
+    path.dirname(pageComponentPath),
+    `_` + path.basename(pageComponentPath)
+  )
+
+  moveAsset(path.join(srcDir, pageComponentPath), path.join(srcDir, hiddenPath))
+  return null
+}
+
 const restore = () => {
-  const globPattern = path.join(publicDir, `/page-data/**`, `_page-data.json`)
-  const hiddenPageDatas = glob.sync(globPattern)
-  hiddenPageDatas.forEach(restorePageData)
+  const hiddenPageDataGlobPattern = path.join(
+    publicDir,
+    `/page-data/**`,
+    `_page-data.json`
+  )
+  const hiddenPageDatas = glob.sync(hiddenPageDataGlobPattern)
+  hiddenPageDatas.forEach(restoreAsset)
+
+  const hiddenPageComponentGlobPattern = path.join(srcDir, `**`, `_*`)
+  const hiddenPageComponents = glob.sync(hiddenPageComponentGlobPattern)
+  hiddenPageComponents.forEach(restoreAsset)
 
   console.log(`Restored resources`)
   return null
@@ -63,4 +83,5 @@ const restore = () => {
 module.exports = {
   restoreAllBlockedResources: restore,
   blockAssetsForPage,
+  blockPageComponent,
 }

packages/gatsby/src/internal-plugins/prod-404/gatsby-node.js

@@ -1,13 +1,28 @@
-let created404 = false
+const { emitter } = require(`../../redux`)
+const { boundActionCreators } = require(`../../redux/actions`)
+
+const PROD_404_PAGE_PATH = `/404.html`
+
+let page404 = null
 exports.onCreatePage = ({ page, store, actions }) => {
   // Copy /404/ to /404.html as many static site hosts expect
   // site 404 pages to be named this.
   // https://www.gatsbyjs.org/docs/add-404-page/
-  if (!created404 && /^\/?404\/?$/.test(page.path)) {
+  if (!page404 && /^\/?404\/?$/.test(page.path)) {
     actions.createPage({
       ...page,
-      path: `/404.html`,
+      path: PROD_404_PAGE_PATH,
     })
-    created404 = true
+    page404 = page
   }
 }
+
+emitter.on(`DELETE_PAGE`, action => {
+  if (page404 && action.payload.path === page404.path) {
+    boundActionCreators.deletePage({
+      ...page404,
+      path: PROD_404_PAGE_PATH,
+    })
+    page404 = null
+  }
+})

packages/gatsby/src/utils/page-data.ts

@@ -24,6 +24,10 @@ export function fixedPagePath(pagePath: string): string {
   return pagePath === `/` ? `index` : pagePath
 }
 
+export function reverseFixedPagePath(pageDataRequestPath: string): string {
+  return pageDataRequestPath === `index` ? `/` : pageDataRequestPath
+}
+
 function getFilePath(publicDir: string, pagePath: string): string {
   return path.join(
     publicDir,

packages/gatsby/src/utils/start-server.ts

@@ -27,9 +27,12 @@ import https from "https"
 import { developStatic } from "../commands/develop-static"
 import withResolverContext from "../schema/context"
 import { websocketManager, WebsocketManager } from "../utils/websocket-manager"
+import { reverseFixedPagePath, readPageData } from "./page-data"
+import { findPageByPath } from "./find-page-by-path"
 import { slash } from "gatsby-core-utils"
 import apiRunnerNode from "../utils/api-runner-node"
 import { Express } from "express"
+import * as path from "path"
 
 import { Stage, IProgram } from "../commands/types"
 import JestWorker from "jest-worker"
@@ -213,6 +216,40 @@ export async function startServer(
     res.end()
   })
 
+  app.get(
+    `/page-data/:pagePath(*)/page-data.json`,
+    async (req, res, next): Promise<void> => {
+      const requestedPagePath = req.params.pagePath
+      if (!requestedPagePath) {
+        next()
+        return
+      }
+
+      const potentialPagePath = reverseFixedPagePath(requestedPagePath)
+      const page = findPageByPath(store.getState(), potentialPagePath, false)
+
+      if (page) {
+        try {
+          const pageData = await readPageData(
+            path.join(store.getState().program.directory, `public`),
+            page.path
+          )
+          res.status(200).send(pageData)
+          return
+        } catch (e) {
+          report.error(
+            `Error loading a result for the page query in "${requestedPagePath}" / "${potentialPagePath}". Query was not run and no cached result was found.`,
+            e
+          )
+        }
+      }
+
+      res.status(404).send({
+        path: potentialPagePath,
+      })
+    }
+  )
+
   // Disable directory indexing i.e. serving index.html from a directory.
   // This can lead to serving stale html files during development.
   //