fix(gatsby): copy slices overrides to 404.html copy (#38337)

Author: pieh

e2e-tests/development-runtime/cypress/integration/slices/slice-via-create-page.js

@@ -22,4 +22,14 @@ describe("Slice passed via createPage", () => {
         .should(`contain`, allRecipeAuthors.find(author => recipe.authorId === author.id).name)
     })
   })
+
+  it(`404 pages with slices mapping have correct content`, () => {
+    cy.visit(`/doesnt-exist`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
+
+    cy.get(`button`).click()
+
+    cy.getTestElement(`mapped-slice`).should("have.text", "My mapped Slice")
+  })
 })

e2e-tests/development-runtime/gatsby-node.js

@@ -216,6 +216,11 @@ exports.createPages = async function createPages({
     },
   })
 
+  createSlice({
+    id: `mappedslice-fakeid`,
+    component: require.resolve(`./src/components/mapped-slice.js`),
+  })
+
   slicesData.allRecipeAuthors.forEach(({ id, name }) => {
     createSlice({
       id: `author-${id}`,
@@ -342,6 +347,13 @@ exports.onCreatePage = async ({ page, actions }) => {
       })
     }
   }
+
+  if (page.path === `/404/`) {
+    createPage({
+      ...page,
+      slices: { mappedslice: "mappedslice-fakeid" },
+    })
+  }
 }
 
 /**

e2e-tests/development-runtime/src/components/mapped-slice.js

@@ -0,0 +1,7 @@
+import * as React from "react"
+
+const MappedSlice = () => {
+  return <div data-testid="mapped-slice">My mapped Slice</div>
+}
+
+export default MappedSlice

e2e-tests/development-runtime/src/pages/404.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { graphql, Link } from "gatsby"
+import { graphql, Link, Slice } from "gatsby"
 
 import Layout from "../components/layout"
 import Seo from "../components/seo"
@@ -64,6 +64,7 @@ const NotFoundPage = ({ data }) => (
         Go to page B
       </Link>
     </fieldset>
+    <Slice alias="mappedslice" />
   </Layout>
 )
 export const Head = () => <Seo title="404: Not found" />

e2e-tests/production-runtime/cypress/integration/slices/slice-via-create-page.js

@@ -22,4 +22,12 @@ describe("Slice passed via createPage", () => {
         .should(`contain`, allRecipeAuthors.find(author => recipe.authorId === author.id).name)
     })
   })
+
+  it(`404 pages with slices mapping have correct content`, () => {
+    cy.visit(`/doesnt-exist`, {
+      failOnStatusCode: false,
+    }).waitForRouteChange()
+
+    cy.getTestElement(`mapped-slice`).should("have.text", "My mapped Slice")
+  })
 })

e2e-tests/production-runtime/gatsby-node.ts

@@ -137,6 +137,11 @@ export const createPages: GatsbyNode["createPages"] = ({
     },
   })
 
+  createSlice({
+    id: `mappedslice-fakeid`,
+    component: path.resolve(`./src/components/mapped-slice.js`),
+  })
+
   slicesData.allRecipeAuthors.forEach(({ id, name }) => {
     createSlice({
       id: `author-${id}`,
@@ -322,5 +327,12 @@ export const onCreatePage: GatsbyNode["onCreatePage"] = ({ page, actions }) => {
         },
       })
       break
+    case `/404/`: {
+      actions.createPage({
+        ...page,
+        slices: { mappedslice: "mappedslice-fakeid" },
+      })
+      break
+    }
   }
 }

e2e-tests/production-runtime/src/components/mapped-slice.js

@@ -0,0 +1,7 @@
+import * as React from "react"
+
+const MappedSlice = () => {
+  return <div data-testid="mapped-slice">My mapped Slice</div>
+}
+
+export default MappedSlice

e2e-tests/production-runtime/src/pages/404.js

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Link } from "gatsby"
+import { Link, Slice } from "gatsby"
 
 import Layout from "../components/layout"
 import Seo from "../components/seo"
@@ -12,6 +12,7 @@ const NotFoundPage = () => (
     <Link to="/" data-testid="index">
       Go to Index
     </Link>
+    <Slice alias="mappedslice" />
   </Layout>
 )
 

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

@@ -1,3 +1,5 @@
+const isEqual = require(`lodash/isEqual`)
+
 const { emitter, store } = require(`../../redux`)
 const { actions } = require(`../../redux/actions`)
 
@@ -15,21 +17,22 @@ emitter.on(`CREATE_PAGE`, action => {
 
     const originalPage = originalStatusPageByStatus[status]
 
-    if (!originalPage) {
-      const storedPage = {
-        path: action.payload.path,
-        component: action.payload.component,
-        context: action.payload.context,
-        status,
-      }
+    const pageToStore = {
+      path: action.payload.path,
+      component: action.payload.component,
+      context: action.payload.context,
+      slices: action.payload.slices,
+      status,
+    }
 
-      originalStatusPageByStatus[status] = storedPage
-      originalStatusPageByPath[action.payload.path] = storedPage
+    if (!originalPage || !isEqual(originalPage, pageToStore)) {
+      originalStatusPageByStatus[status] = pageToStore
+      originalStatusPageByPath[action.payload.path] = pageToStore
 
       store.dispatch(
         actions.createPage(
           {
-            ...storedPage,
+            ...pageToStore,
             path: `/${status}.html`,
           },
           action.plugin,