fix(gatsby): Shadowing with resourceQuery (#37938)

* the actual fix

* actual actual fix

* test setup with mdx

* test assertion

* fix development-runtime

* test test

* revert files that i didn't want to commit

* fix dev, too

Author: LekoArts

.circleci/config.yml

@@ -392,15 +392,15 @@ jobs:
       - run: echo 'export CYPRESS_RECORD_KEY="${CY_CLOUD_THEMES_DEV_RUNTIME}"' >> "$BASH_ENV"
       - e2e-test:
           test_path: e2e-tests/themes
-          test_command: cd development-runtime; yarn test
+          test_command: cd development-runtime; gatsby-dev --force-install --scan-once; yarn test
 
   themes_e2e_tests_production_runtime:
     <<: *e2e-executor
     steps:
       - run: echo 'export CYPRESS_RECORD_KEY="${CY_CLOUD_THEMES_PROD_RUNTIME}"' >> "$BASH_ENV"
       - e2e-test:
           test_path: e2e-tests/themes
-          test_command: cd production-runtime; yarn test
+          test_command: cd production-runtime; gatsby-dev --force-install --scan-once; yarn test
 
   e2e_tests_mdx:
     <<: *e2e-executor

e2e-tests/themes/development-runtime/content/posts/dune.mdx

@@ -0,0 +1,6 @@
+---
+title: Dune
+slug: /dune
+---
+
+Dune is set in the distant future amidst a feudal interstellar society in which various noble houses control planetary fiefs. It tells the story of young Paul Atreides, whose family accepts the stewardship of the planet Arrakis.

e2e-tests/themes/development-runtime/package.json

@@ -13,6 +13,7 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
+    "clean": "gatsby clean",
     "format": "prettier --write \"src/**/*.js\"",
     "serve": "gatsby serve",
     "start": "npm run develop",

e2e-tests/themes/gatsby-theme-about/gatsby-config.js

@@ -11,5 +11,13 @@ module.exports = {
         path: `${__dirname}/src/pages`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `posts`,
+        path: `./content/posts`,
+      },
+    },
+    `gatsby-plugin-mdx`,
   ],
 }

e2e-tests/themes/gatsby-theme-about/gatsby-node.js

@@ -1,9 +1,44 @@
 const bioTemplate = require.resolve(`./src/templates/bio.js`)
+const postTemplate = require.resolve(`./src/templates/post.jsx`)
 
-exports.createPages = async ({ actions }) => {
-    const { createPage } = actions
-    createPage({ 
-        path: `/bio`, 
-        component: bioTemplate,
+exports.createPages = async ({ actions, graphql, reporter }) => {
+  const { createPage } = actions
+
+  const result = await graphql(`
+    {
+      allMdx {
+        nodes {
+          id
+          frontmatter {
+            slug
+          }
+          internal {
+            contentFilePath
+          }
+        }
+      }
+    }
+  `)
+
+  if (result.errors) {
+    reporter.panicOnBuild(`There was an error loading your posts or pages`, result.errors)
+    return
+  }
+
+  const posts = result.data.allMdx.nodes
+
+  posts.forEach((post) => {
+    createPage({
+      path: post.frontmatter.slug,
+      component: `${postTemplate}?__contentFilePath=${post.internal.contentFilePath}`,
+      context: {
+        id: post.id,
+      },
     })
+  })
+
+  createPage({
+    path: `/bio`,
+    component: bioTemplate,
+  })
 }

e2e-tests/themes/gatsby-theme-about/package.json

@@ -18,8 +18,11 @@
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/e2e-tests/themes/gatsby-theme-about#readme",
   "dependencies": {
+    "@mdx-js/react": "^2.3.0",
     "gatsby": "next",
-    "gatsby-plugin-page-creator": "next"
+    "gatsby-plugin-mdx": "next",
+    "gatsby-plugin-page-creator": "next",
+    "gatsby-source-filesystem": "next"
   },
   "devDependencies": {
     "prettier": "2.8.7"

e2e-tests/themes/gatsby-theme-about/src/templates/post.jsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+export default function Post({ data, children }) {
+  return (
+    <main>
+      <h1 data-testid="post-template">{data.post.frontmatter.title}</h1>
+      {children}
+    </main>
+  )
+}
+
+export const Head = () => <title>Post</title>
+
+export const query = graphql`
+  query($id: String!) {
+    post: mdx(id: { eq: $id }) {
+      frontmatter {
+        title
+      }
+    }
+  }
+`

e2e-tests/themes/production-runtime/content/posts/dune.mdx

@@ -0,0 +1,6 @@
+---
+title: Dune
+slug: /dune
+---
+
+Dune is set in the distant future amidst a feudal interstellar society in which various noble houses control planetary fiefs. It tells the story of young Paul Atreides, whose family accepts the stewardship of the planet Arrakis.

e2e-tests/themes/production-runtime/cypress/integration/pages.js

@@ -28,4 +28,8 @@ describe(`Pages`, () => {
     cy.visit(`/about`).waitForRouteChange()
     cy.getTestElement(`author`).contains(`Sidhartha Chatterjee`)
   })
+  it(`page templates with resourceQuery can be shadowed`, () => {
+    cy.visit(`/dune`).waitForRouteChange()
+    cy.getTestElement(`post-template`).contains(`Dune - Shadowed`)
+  })
 })

e2e-tests/themes/production-runtime/package.json

@@ -13,6 +13,7 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
+    "clean": "gatsby clean",
     "format": "prettier --write \"src/**/*.js\"",
     "serve": "gatsby serve",
     "start": "npm run develop",