.circleci/config.yml

@@ -117,6 +117,23 @@ aliases:
       - notify-status:
           condition: << parameters.nightly >>
 
+  e2e_tests_development_runtime_lazy_alias:
+    &e2e_tests_development_runtime_lazy_alias
+    <<: *e2e-executor
+    parameters:
+      nightly:
+        type: boolean
+        default: false
+    environment:
+      CYPRESS_PROJECT_ID: ihj5mz
+      CYPRESS_RECORD_KEY: 01acdce8-75bd-4280-9839-6cb215b2c84b
+    steps:
+      - e2e-test:
+          test_path: e2e-tests/lazy-development-runtime
+          skip_file_change_test: << parameters.nightly >>
+      - notify-status:
+          condition: << parameters.nightly >>
+
   e2e_tests_gatsby-image_alias: &e2e_tests_gatsby-image_alias
     <<: *e2e-executor
     parameters:
@@ -271,6 +288,12 @@ jobs:
       - e2e-test:
           test_path: integration-tests/artifacts
 
+  integration_tests_ssr:
+    executor: node
+    steps:
+      - e2e-test:
+          test_path: integration-tests/ssr
+
   e2e_tests_path-prefix:
     <<: *e2e-executor
     environment:
@@ -326,6 +349,13 @@ jobs:
   e2e_tests_development_runtime:
     <<: *e2e_tests_development_runtime_alias
 
+  e2e_tests_development_runtime_lazy_devjs:
+    <<: *e2e_tests_development_runtime_alias
+    environment:
+      GATSBY_EXPERIMENT_LAZY_DEVJS: true
+      CYPRESS_PROJECT_ID: ihj5mz
+      CYPRESS_RECORD_KEY: 01acdce8-75bd-4280-9839-6cb215b2c84b
+
   e2e_tests_development_runtime_with_experimental_react:
     <<: *e2e_tests_development_runtime_alias
 
@@ -582,6 +612,8 @@ workflows:
           <<: *e2e-test-workflow
       - integration_tests_artifacts:
           <<: *e2e-test-workflow
+      - integration_tests_ssr:
+          <<: *e2e-test-workflow
       - integration_tests_gatsby_cli:
           requires:
             - bootstrap
@@ -597,6 +629,8 @@ workflows:
           <<: *e2e-test-workflow
       - e2e_tests_development_runtime:
           <<: *e2e-test-workflow
+      - e2e_tests_development_runtime_lazy_devjs:
+          <<: *e2e-test-workflow
       - e2e_tests_production_runtime:
           <<: *e2e-test-workflow
       - themes_e2e_tests_production_runtime:

.gitignore

@@ -26,8 +26,6 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
-examples/biz-website/public/
-examples/blog/public/
 integration-tests/gatsby-cli/execution-folder/*
 *.un~
 dist

README.md

@@ -23,7 +23,7 @@
   <a href="https://circleci.com/gh/gatsbyjs/gatsby">
     <img src="https://circleci.com/gh/gatsbyjs/gatsby.svg?style=shield" alt="Current CircleCI build status." />
   </a>
-  <a href="https://www.npmjs.org/package/gatsby">
+  <a href="https://www.npmjs.com/package/gatsby">
     <img src="https://img.shields.io/npm/v/gatsby.svg" alt="Current npm package version." />
   </a>
   <a href="https://npmcharts.com/compare/gatsby?minimal=true">

benchmarks/gabe-fs-mdx/gatsby-config.js

@@ -10,6 +10,11 @@ module.exports = {
         path: `${__dirname}/generated_articles/`,
       },
     },
-    `gatsby-plugin-mdx`,
+    {
+      resolve: `gatsby-plugin-mdx`,
+      options: {
+        // lessBabel: true,
+      },
+    },
   ],
 }

benchmarks/source-contentful/gatsby-config.js

@@ -27,6 +27,7 @@ module.exports = {
     {
       resolve: "gatsby-source-contentful",
       options: contentfulConfig,
+      pageLimit: 1000,
     },
   ],
 }

benchmarks/source-strapi/package.json

@@ -14,7 +14,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "sharp": "^0.25.4"
+    "sharp": "^0.26.3"
   },
   "devDependencies": {
     "prettier": "2.0.5"

docs/contributing/community.md

@@ -62,6 +62,10 @@ If you need an answer right away, check out the
 [Gatsby Discord](https://gatsby.dev/discord). Community & team members are happy to help you out or point you to
 useful resources.
 
+### GitHub Discussions
+
+Directly integrated into the repository, you can use [GitHub Discussions](https://github.com/gatsbyjs/gatsby/discussions) to ask for help or share ideas.
+
 ### Hashnode
 
 Many members of the community also use Hashnode to ask questions and share their tips. Read through

docs/docs/add-seo-component.md

@@ -62,7 +62,7 @@ Now define the query and pass it to `useStaticQuery`. You can also alias query i
 
 ```jsx:title=src/components/seo.js
 const SEO = ({ title, description, image, article }) => {
-  const { location } = useLocation()
+  const { pathname } = useLocation()
   const { site } = useStaticQuery(query)
 
   return null

docs/docs/deploying-to-firebase.md

@@ -58,7 +58,7 @@ In this guide, you will learn how to deploy your Gatsby site to Firebase Hosting
            "headers": [
              {
                "key": "cache-control",
-               "value": "cache-control: public, max-age=0, must-revalidate"
+               "value": "public, max-age=0, must-revalidate"
              }
            ]
          },
@@ -85,7 +85,7 @@ In this guide, you will learn how to deploy your Gatsby site to Firebase Hosting
            "headers": [
              {
                "key": "cache-control",
-               "value": "cache-control: public, max-age=0, must-revalidate"
+               "value": "public, max-age=0, must-revalidate"
              }
            ]
          },
@@ -94,7 +94,7 @@ In this guide, you will learn how to deploy your Gatsby site to Firebase Hosting
            "headers": [
              {
                "key": "cache-control",
-               "value": "cache-control: public, max-age=0, must-revalidate"
+               "value": "public, max-age=0, must-revalidate"
              }
            ]
          }

docs/docs/gatsby-cli.md

@@ -66,6 +66,8 @@ gatsby new
    (Use a different starter)
 ```
 
+_Note: you can try out the experimental interactive experience from the `create-gatsby` package with the `GATSBY_EXPERIMENTAL_GATSBY_NEW_FLOW=true` flag, which will prompt you with questions about the kind of site you're building, and install the plugins you'll need automatically._
+
 See the [Gatsby starters docs](/docs/gatsby-starters/) for more details.
 
 ### `develop`

docs/docs/recipes/styling-css.md

@@ -395,35 +395,41 @@ Hosting your own [Google Fonts](https://fonts.google.com/) locally within a proj
 
 - A [Gatsby site](/docs/quick-start)
 - The [Gatsby CLI](/docs/gatsby-cli/) installed
-- Choosing a font package from [the typefaces project](https://github.com/KyleAMathews/typefaces)
+- A chosen font package from [Fontsource](https://github.com/fontsource/fontsource)
 
 ### Directions
 
-1. Run `npm install typeface-your-chosen-font`, replacing `your-chosen-font` with the name of the font you want to install from [the typefaces project](https://github.com/KyleAMathews/typefaces).
+This example shows how to set up the [Open Sans](https://fonts.google.com/specimen/Open+Sans) font. If you have a different Google Font you want to use, you can find the corresponding package in [NPM](https://www.npmjs.com/search?q=fontsource) or the [packages directory in the Fontsource repository](https://github.com/fontsource/fontsource/tree/master/packages).
 
-An example to load the popular 'Source Sans Pro' font would be: `npm install typeface-source-sans-pro`.
+1. Run `npm install fontsource-open-sans` to download the necessary package files.
 
-2. Add `import "typeface-your-chosen-font"` to a layout template, page component, or `gatsby-browser.js`.
+2. Then within your app entry file or site component, import the font package. It is recommended you import it via the layout template (`layout.js`). However, importing via page component (`index.js`), or `gatsby-browser.js` are viable alternatives.
 
 ```jsx:title=src/components/layout.js
-import "typeface-your-chosen-font"
+import "fontsource-open-sans" // Defaults to weight 400 with all styles included.
 ```
 
+If you wish to select a particular weight or style, you may specify it by changing the import path.
+
+```jsx:title=src/components/layout.js
+import "fontsource-open-sans/500.css" // Weight 500 with all styles included.
+import "fontsource-open-sans/900-normal.css" // Select either normal or italic.
+```
+
+**Note**: The range of supported weights and styles a font may support is shown in each package's README file.
+
 3. Once it's imported, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.
 
 ```css:title=src/components/layout.css
 body {
-  font-family: "Your Chosen Font";
+  font-family: "Open Sans";
 }
 ```
 
-_NOTE: So for the above example, the relevant CSS declaration would be `font-family: 'Source Sans Pro';`_
-
 ### Additional resources
 
+- [Fontsource repo on GitHub](https://github.com/fontsource/fontsource)
 - [Typography.js](/docs/typography-js/) - Another option for using Google fonts on a Gatsby site
-- [The Typefaces Project Docs](https://github.com/KyleAMathews/typefaces/blob/master/README.md)
-- [Live example on Kyle Mathews' blog](https://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/)
 
 ## Using Font Awesome
 

docs/docs/using-web-fonts.md

@@ -18,36 +18,32 @@ Some examples of web font services include [Google Fonts](https://fonts.google.c
 
 ### Using Google Fonts
 
-The fastest way to get started using Google Fonts is by choosing a font from [the typefaces project](https://github.com/KyleAMathews/typefaces). This example shows how you can add Open Sans to your project.
+The fastest way to get started using Google Fonts is by choosing a font from [Fontsource](https://github.com/fontsource/fontsource).
 
-First, install the typeface package with npm:
+This example shows how to set up the [Open Sans](https://fonts.google.com/specimen/Open+Sans) font. If you have a different Google Font you want to use, you can find the corresponding package in [NPM](https://www.npmjs.com/search?q=fontsource) or the [packages directory in the Fontsource repository](https://github.com/fontsource/fontsource/tree/master/packages).
 
-```bash
-npm install --save typeface-open-sans
-```
+1. Run `npm install fontsource-open-sans` to download the necessary package files.
 
-Or with yarn:
+2. Then within your app entry file or site component, import the font package. It is recommended you import it via the layout template (`layout.js`). However, importing via page component (`index.js`), or `gatsby-browser.js` are viable alternatives.
 
-```bash
-yarn add typeface-open-sans
+```jsx:title=src/components/layout.js
+import "fontsource-open-sans" // Defaults to weight 400 with all styles included.
 ```
 
-In your `layout.js` file, import the typeface.
+If you wish to select a particular weight or style, you may specify it by changing the import path.
 
 ```jsx:title=src/components/layout.js
-import "typeface-open-sans"
+import "fontsource-open-sans/500.css" // Weight 500 with all styles included.
+import "fontsource-open-sans/900-normal.css" // Select either normal or italic.
 ```
 
-Next, add the typeface name to the appropriate place in your CSS. In this case, you will override the `body` element's `font-family` default values.
+**Note**: The range of supported weights and styles a font may support is shown in each package's README file.
+
+3. Once it's imported, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.
 
 ```css:title=src/components/layout.css
 body {
-  color: hsla(0, 0%, 0%, 0.8);
-  // highlight-next-line
-  font-family: "Open Sans", georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
+  font-family: "Open Sans";
 }
 ```
 

docs/reference/release-notes/v2.26/index.md

@@ -0,0 +1,185 @@
+---
+date: "2020-11-12"
+version: "2.26.0"
+---
+
+# [v2.26](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.26.0-next.0...gatsby@2.26.0) (November 2020)
+
+---
+
+Welcome to `gatsby@2.26.0` release (November 2020).
+Key highlights of this release:
+
+- [New Image Plugin (beta)](#gatsby-plugin-image010-beta) - access static images without GraphQL, high Lighthouse scores again
+- [File System Route API](#file-system-route-api) - create routes from your data using filename conventions
+- [New Release Process](#new-release-process) - more stability and clarity around Gatsby releases
+- [gatsby-source-contentful v4.0](#gatsby-source-contentful400) - new RichText implementation, performance improvements
+
+Other notable changes:
+
+- [gatsby-plugin-mdx](#gatsby-plugin-mdx140) - performance improvements
+- [Enable compression in the dev server](#enable-compression-in-the-dev-server) - speeds up remote previews
+
+Sneak peek to next releases:
+
+- [Queries on Demand](#queries-on-demand) - improves `gatsby develop` bootup time
+- [Experimental: Lazy images in develop](#experimental-lazy-images-in-develop)
+- [Documentation Reorganization](#documentation-reorganization)
+
+**Bleeding Edge:** Want to try new features as soon as possible? Install `gatsby@next` and let us know
+if you have any [issues](https://github.com/gatsbyjs/gatsby/issues).
+
+### New Release Process
+
+We are evaluating a new process that should bring more stability and clarity
+to Gatsby releases.
+
+### File System Route API
+
+This new API enables you to create routes from your GraphQL data using filename conventions,
+e.g. to create individual blog post pages for your blog. It also allows for creating client-only routes more easily.
+
+Some examples:
+
+- `src/pages/products/{Product.name}.js` will generate pages for all products with a path like `/products/burger`
+- `src/pages/products/{Product.fields__sku}.js` will generate pages for all products with a path like `/products/001923`
+- `src/pages/users/[id].js` will generate a route like `/users/:id`
+- `src/pages/image/[...].js` will generate a route like `/image/*`
+
+See [full documentation](https://www.gatsbyjs.com/docs/file-system-route-api/),
+[examples](https://github.com/gatsbyjs/gatsby/tree/master/examples/route-api)
+and related PR [#27424](https://github.com/gatsbyjs/gatsby/pull/27424).
+
+### Enable compression in the dev server
+
+This lowers the amount of data transferred for one site especially in remote situations.
+Most of that drop was from the commons.js bundle.
+
+See PR [#27948](https://github.com/gatsbyjs/gatsby/pull/27948) for details.
+
+## gatsby-plugin-image@0.1.0 (beta)
+
+[New image plugin](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image) to replace `gatsby-image`, which greatly improves performance (Lighthouse 💯 again) and adds easy static images (no GraphQL). Part of it is also a new, simpler API for `gatsby-transformer-sharp`.
+
+### StaticImage
+
+This component is a new, simpler way to use Gatsby's image processing for static images without needing to write GraphQL queries:
+
+```js
+import React from "react"
+import { StaticImage } from "gatsby-plugin-image"
+
+export const Dino = () => (
+  <StaticImage width={100} height={100} src="trex.png" alt="T-Rex" />
+)
+```
+
+### GatsbyImage
+
+This is a complete rewrite of the Gatsby Image component, using native lazy loading whenever possible.
+In our tests it allows sites whose Lighthouse scores dropped in recent updates to get back to 100s across the board.
+
+### Simpler GraphQL for non-static images
+
+Instead of having to remember lots of different fragments for different image types,
+you can pass all your options as field arguments (and get inline help in GraphiQL):
+
+```graphql
+query {
+  file(relativePath: { eq: "plant.jpg" }) {
+    childImageSharp {
+      gatsbyImageData(maxWidth: 720, layout: FLUID, placeholder: TRACED_SVG)
+    }
+  }
+}
+```
+
+You then use the data like this:
+
+```jsx
+import { GatsbyImage, getImage } from "gatsby-plugin-image"
+
+export function Plant({ data }) {
+  const imageData = getImage(data.file)
+  return <GatsbyImage image={imageData} alt="Plant" />
+}
+```
+
+- [Details, Migration guide and discussion](https://github.com/gatsbyjs/gatsby/discussions/27950)
+- [Documentation](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image)
+
+## gatsby-source-contentful@4.0.0
+
+### New Rich Text Implementation
+
+**Breaking Change**: New rich text implementation for performance and usability. This is only a breaking change if you rely on the Rich Text Contentful field type.
+
+See PR [#25249](https://github.com/gatsbyjs/gatsby/pull/25249) description for details and migration guide.
+
+### Performance improvements
+
+The max of `pageLimit` option was raised from `100` to `1000` (on Contentful's side) which should lead
+to significant reduction of remote fetching times.
+
+Note that the default value for the `pageLimit` option is still `100`, so you need to change
+it manually in your site config to see performance improvements.
+
+Due to technical limitations, the response payload size is still bound by a hard chunk download
+size, so it is possible you may need to use a lower value for your particular site.
+
+## gatsby-plugin-mdx@1.4.0
+
+There was a significant performance improvement by making a certain node fetching step lazy.
+This is especially noticeable at scale. See PR [#27937](https://github.com/gatsbyjs/gatsby/pull/27937) for details.
+
+## Work in progress
+
+### Queries on Demand
+
+When developing a Gatsby site there's no need to run all graphql queries before serving the site.
+Instead, Gatsby could run queries for pages as they're requested by a browser.
+This would avoid having to wait for slower queries (like image processing) if you're editing an unrelated part of a site.
+
+Try early alpha (and [let us know](https://github.com/gatsbyjs/gatsby/discussions/27620) if you have any issues with it):
+
+```
+npm install gatsby@qod
+```
+
+Enable in your `gatsby-config.js`:
+
+```js
+module.exports = {
+  // your existing configuration
+  __experimentalQueryOnDemand: true,
+}
+```
+
+[Details and discussion](https://github.com/gatsbyjs/gatsby/discussions/27620).
+
+### Experimental: Lazy images in develop
+
+We've got some feedback that the more image-heavy your website gets, the slower `gatsby develop`.
+This experimental version of `gatsby-plugin-sharp` only does image processing when the page gets requested.
+
+Try early alpha (and [let us know](https://github.com/gatsbyjs/gatsby/discussions/27603) if you have any issues with it):
+
+```
+npm install gatsby-plugin-sharp@lazy-images
+```
+
+Lazy images are enabled by-default in this version.
+
+[Details and discussion](https://github.com/gatsbyjs/gatsby/discussions/27603).
+
+### Documentation Reorganization
+
+We’ve heard repeatedly from the community that Gatsby is a powerful tool,
+but it has a steep learning curve. We want to make it easier to get started with Gatsby.
+And that means having documentation that helps y’all find the information you need when you need it.
+
+[Announcement and discussion](https://github.com/gatsbyjs/gatsby/discussions/27856).
+
+## Contributors
+
+A big **Thank You** to [everyone who contributed](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.26.0-next.0...gatsby@2.26.0) to this release 💜

e2e-tests/development-runtime/content/query-data-caches/page-query-404-to-B-to-404-history.json

@@ -0,0 +1,4 @@
+{
+  "selector": "page-query-404-to-B-to-404-history",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/page-query-404-to-B-to-404-link.json

@@ -0,0 +1,4 @@
+{
+  "selector": "page-query-404-to-B-to-404-link",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/page-query-CO-to-B-to-CO-history.json

@@ -0,0 +1,4 @@
+{
+  "selector": "page-query-CO-to-B-to-CO-history",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/page-query-CO-to-B-to-CO-link.json

@@ -0,0 +1,4 @@
+{
+  "selector": "page-query-CO-to-B-to-CO-link",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/page-query-no-trailing-slash-A-to-B-to-A-history.json

@@ -0,0 +1,4 @@
+{
+  "selector": "page-query-no-trailing-slash-A-to-B-to-A-history",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/page-query-no-trailing-slash-A-to-B-to-A-link.json

@@ -0,0 +1,4 @@
+{
+  "selector": "page-query-no-trailing-slash-A-to-B-to-A-link",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/page-query-with-trailing-slash-A-to-B-to-A-history.json

@@ -0,0 +1,4 @@
+{
+  "selector": "page-query-with-trailing-slash-A-to-B-to-A-history",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/page-query-with-trailing-slash-A-to-B-to-A-link.json

@@ -0,0 +1,4 @@
+{
+  "selector": "page-query-with-trailing-slash-A-to-B-to-A-link",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/static-query-404-to-B-to-404-history.json

@@ -0,0 +1,4 @@
+{
+  "selector": "static-query-404-to-B-to-404-history",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/static-query-404-to-B-to-404-link.json

@@ -0,0 +1,4 @@
+{
+  "selector": "static-query-404-to-B-to-404-link",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/static-query-CO-to-B-to-CO-history.json

@@ -0,0 +1,4 @@
+{
+  "selector": "static-query-CO-to-B-to-CO-history",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/static-query-CO-to-B-to-CO-link.json

@@ -0,0 +1,4 @@
+{
+  "selector": "static-query-CO-to-B-to-CO-link",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/static-query-no-trailing-slash-A-to-B-to-A-history.json

@@ -0,0 +1,4 @@
+{
+  "selector": "static-query-no-trailing-slash-A-to-B-to-A-history",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/static-query-no-trailing-slash-A-to-B-to-A-link.json

@@ -0,0 +1,4 @@
+{
+  "selector": "static-query-no-trailing-slash-A-to-B-to-A-link",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/static-query-with-trailing-slash-A-to-B-to-A-history.json

@@ -0,0 +1,4 @@
+{
+  "selector": "static-query-with-trailing-slash-A-to-B-to-A-history",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/content/query-data-caches/static-query-with-trailing-slash-A-to-B-to-A-link.json

@@ -0,0 +1,4 @@
+{
+  "selector": "static-query-with-trailing-slash-A-to-B-to-A-link",
+  "status": "before-edit"
+}

e2e-tests/development-runtime/cypress.json

@@ -1,5 +1,6 @@
 {
   "baseUrl": "http://localhost:8000",
   "failOnStatusCode": false,
-  "chromeWebSecurity": false
+  "chromeWebSecurity": false,
+  "defaultCommandTimeout": 30000
 }

e2e-tests/development-runtime/cypress/integration/functionality/query-data-caches.js

@@ -0,0 +1,351 @@
+/*
+ * Those are the tests for page and static query caches that we store in runtime.
+ * It should make sure that we correctly update them when needed. In particular:
+ *   a) we don't display stale content
+ *   b) that various edge cases are handled and we don't end up showing blank page of death
+ *
+ * Important part here is to make sure we only use client-side navigation, as regular browser navigation would clear those caches
+ *
+ * How those test work?
+ *
+ * There is 16 test scenarios:
+ *  - Each scenario has 2 dedicated pages (with exception of 404 scenario, because we only can have one 404 page, so this is shared for multiple pages).
+ *  - Each scenario has dedicated data node (queried by both pages dedicated to the scenario). This is coming from `.json` file (see `content/query-data-caches`)
+ *  - There are 4 page types:
+ *    - Regular static page that has trailing slash (referred to as `with-trailing-slash-A` in tests, data files, page components, etc)
+ *    - Regular static page that DOESN't have trailing slash (referred to as `no-trailing-slash-A` in tests, data files, page components, etc)
+ *    - Client-only page (referred to as `client-only` or `CO`)
+ *    - 404 page (referred to as `404`)
+ *  - There are 2 types of query - page query and static query
+ *  - Each scenario has follow same steps:
+ *    1. Visit starting page
+ *    2. Set variable on `window` object (will be used in step 11.)
+ *    3. Assert page type, page canonical path and data for initial page and initial data
+ *    4. At this point all runtime data caches for that page should be saturated
+ *    5. Navigate to second page for the scenario using `gatsby-link` (we want to `cy.visit` only once per scenario to keep cached data in memory)
+ *    6. Assert page type, page canonical path and data for second page and initial data
+ *    7. Update data (edit `.json` file) that is used by both pages used in the scenario
+ *    8. Assert page type, page canonical path and data for second page and *updated* data
+ *    9. Navigate to initial page. There are 2 cases for navigating back and there are separate scenarios for those
+ *       - using `gatsby-link`
+ *       - using `history.back()`
+ *    10. Assert page type, page canonical path and data for initial page and *updated* data
+ *    11. Assert that variable set on `window` object in step 2. is still there (this is to make sure we used only client side navigation and cached data wasn't lost as part of refresh or traditional browser navigation)
+ */
+
+// --- common helpers ---
+function updateData(config) {
+  cy.exec(
+    `npm run update -- --file content/query-data-caches/${config.slug}.json --replacements "before-edit:after-edit" --exact`
+  )
+}
+function preTestSetup(config) {
+  cy.exec(
+    `npm run update -- --file content/query-data-caches/${config.slug}.json --restore`
+  )
+}
+
+before(() => {
+  cy.exec(`npm run reset`)
+})
+
+after(() => {
+  cy.exec(`npm run reset`)
+})
+
+function setupForAssertingNotReloading() {
+  cy.window().then(win => {
+    win.__checkIfDidNotReload = true
+  })
+}
+
+function assertNotReloading() {
+  // this is making sure we used only client-side navigation
+  // if there was reload, `__checkIfDidNotReload` on window object wouldn't exist
+  cy.window().its(`__checkIfDidNotReload`).should(`equal`, true)
+}
+
+function getExpectedCanonicalPath(config) {
+  if (config.page === `404`) {
+    return `/404.html`
+  }
+
+  return `/query-data-caches/${config.slug}/${
+    config.page === `client-only`
+      ? `:client-only`
+      : `page-${config.page}${config.trailingSlash === false ? `` : `/`}`
+  }`
+}
+
+function pageTitleAndDataAssertion(config) {
+  cy.log(
+    `Asserting that we are on page "${config.page}" with data "${config.data}"`
+  )
+
+  if (config.page === `404`) {
+    // if we are on 404 we need to hide dev-404 to show real 404 page
+    cy.findByText(`Preview custom 404 page`).click()
+  }
+
+  cy.getTestElement(`${config.prefix || ``}page-path`)
+    .invoke(`text`)
+    .should(`equal`, getExpectedCanonicalPath(config))
+
+  cy.getTestElement(`${config.prefix || ``}query-data-caches-page-title`)
+    .invoke(`text`)
+    .should(`equal`, `This is page ${config.page}`)
+
+  cy.getTestElement(`${config.prefix || ``}${config.queryType}-query-result`)
+    .invoke(`text`)
+    .should(
+      `equal`,
+      `${config.slug} / ${
+        config.page === config.initialPage ? `initial-page` : `second-page`
+      }: ${config.data}`
+    )
+}
+
+function runTests(config) {
+  preTestSetup(config)
+
+  cy.visit(`/query-data-caches/${config.slug}/page-A/`).waitForRouteChange()
+
+  setupForAssertingNotReloading()
+
+  // baseline assertions
+  pageTitleAndDataAssertion({
+    ...config,
+    page: config.initialPage,
+    data: `before-edit`,
+  })
+
+  cy.getTestElement(`page-b-link`).click().waitForRouteChange()
+
+  // assert we navigated
+  pageTitleAndDataAssertion({ ...config, page: `B`, data: `before-edit` })
+
+  // edit data
+  updateData(config)
+
+  // assert data on current page changed
+  pageTitleAndDataAssertion({ ...config, page: `B`, data: `after-edit` })
+
+  if (config.navigateBack === `link`) {
+    cy.getTestElement(`page-a-link`).click().waitForRouteChange()
+  } else if (config.navigateBack === `history`) {
+    // this is just making sure page components don't have link to navigate back (asserting correct setup)
+    cy.getTestElement(`page-a-link`).should(`not.exist`)
+    cy.go(`back`).waitForRouteChange()
+  }
+
+  // assert data on page we previously visited is updated
+  pageTitleAndDataAssertion({
+    ...config,
+    page: config.initialPage,
+    data: `after-edit`,
+  })
+
+  assertNotReloading()
+}
+
+describe(`Navigate from static page A to page B, invalidate some data resources for static page A, navigate back to static page A`, () => {
+  describe(`Navigating back with gatsby-link`, () => {
+    it(`page query (page has trailing slash)`, () => {
+      const config = {
+        slug: `page-query-with-trailing-slash-A-to-B-to-A-link`,
+        queryType: `page`,
+        navigateBack: `link`,
+        initialPage: `A`,
+      }
+
+      runTests(config)
+    })
+
+    it(`page query (page doesn't have trailing slash)`, () => {
+      const config = {
+        slug: `page-query-no-trailing-slash-A-to-B-to-A-link`,
+        trailingSlash: false,
+        queryType: `page`,
+        navigateBack: `link`,
+        initialPage: `A`,
+      }
+
+      runTests(config)
+    })
+
+    it(`static query (page has trailing slash)`, () => {
+      const config = {
+        slug: `static-query-with-trailing-slash-A-to-B-to-A-link`,
+        queryType: `static`,
+        navigateBack: `link`,
+        initialPage: `A`,
+      }
+
+      runTests(config)
+    })
+
+    it(`static query (page doesn't have trailing slash)`, () => {
+      const config = {
+        slug: `static-query-no-trailing-slash-A-to-B-to-A-link`,
+        trailingSlash: false,
+        queryType: `static`,
+        navigateBack: `link`,
+        initialPage: `A`,
+      }
+
+      runTests(config)
+    })
+  })
+
+  describe(`Navigating back with history.back()`, () => {
+    it(`page query (page has trailing slash)`, () => {
+      const config = {
+        slug: `page-query-with-trailing-slash-A-to-B-to-A-history`,
+        queryType: `page`,
+        navigateBack: `history`,
+        initialPage: `A`,
+      }
+
+      runTests(config)
+    })
+
+    it(`page query (page doesn't have trailing slash)`, () => {
+      const config = {
+        slug: `page-query-no-trailing-slash-A-to-B-to-A-history`,
+        trailingSlash: false,
+        queryType: `page`,
+        navigateBack: `history`,
+        initialPage: `A`,
+      }
+
+      runTests(config)
+    })
+
+    it(`static query (page has trailing slash)`, () => {
+      const config = {
+        slug: `static-query-with-trailing-slash-A-to-B-to-A-history`,
+        queryType: `static`,
+        navigateBack: `history`,
+        initialPage: `A`,
+      }
+
+      runTests(config)
+    })
+
+    it(`static query (page doesn't have trailing slash)`, () => {
+      const config = {
+        slug: `static-query-no-trailing-slash-A-to-B-to-A-history`,
+        trailingSlash: false,
+        queryType: `static`,
+        navigateBack: `history`,
+        initialPage: `A`,
+      }
+
+      runTests(config)
+    })
+  })
+})
+
+describe(`Navigate from client-only page A to page B, invalidate some data resources for client-only page A, navigate back to client-only page A`, () => {
+  describe(`Navigating back with gatsby-link`, () => {
+    it(`page query`, () => {
+      const config = {
+        slug: `page-query-CO-to-B-to-CO-link`,
+        queryType: `page`,
+        navigateBack: `link`,
+        initialPage: `client-only`,
+      }
+
+      runTests(config)
+    })
+
+    it(`static query`, () => {
+      const config = {
+        slug: `static-query-CO-to-B-to-CO-link`,
+        queryType: `static`,
+        navigateBack: `link`,
+        initialPage: `client-only`,
+      }
+
+      runTests(config)
+    })
+  })
+
+  describe(`Navigating back with history.back()`, () => {
+    it(`page query`, () => {
+      const config = {
+        slug: `page-query-CO-to-B-to-CO-history`,
+        queryType: `page`,
+        navigateBack: `history`,
+        initialPage: `client-only`,
+      }
+
+      runTests(config)
+    })
+
+    it(`static query`, () => {
+      const config = {
+        slug: `static-query-CO-to-B-to-CO-history`,
+        queryType: `static`,
+        navigateBack: `history`,
+        initialPage: `client-only`,
+      }
+
+      runTests(config)
+    })
+  })
+})
+
+describe(`Navigate from 404 page A to page B, invalidate some data resources for 404 page A, navigate back to 404 page A`, () => {
+  describe(`Navigating back with gatsby-link`, () => {
+    it(`page query`, () => {
+      const config = {
+        slug: `page-query-404-to-B-to-404-link`,
+        queryType: `page`,
+        navigateBack: `link`,
+        initialPage: `404`,
+        prefix: `page-link-`,
+      }
+
+      runTests(config)
+    })
+
+    it(`static query`, () => {
+      const config = {
+        slug: `static-query-404-to-B-to-404-link`,
+        queryType: `static`,
+        navigateBack: `link`,
+        initialPage: `404`,
+        prefix: `static-link-`,
+      }
+
+      runTests(config)
+    })
+  })
+
+  describe(`Navigating back with history.back()`, () => {
+    it(`page query`, () => {
+      const config = {
+        slug: `page-query-404-to-B-to-404-history`,
+        queryType: `page`,
+        navigateBack: `history`,
+        initialPage: `404`,
+        prefix: `page-history-`,
+      }
+
+      runTests(config)
+    })
+
+    it(`static query`, () => {
+      const config = {
+        slug: `static-query-404-to-B-to-404-history`,
+        queryType: `static`,
+        navigateBack: `history`,
+        initialPage: `404`,
+        prefix: `static-history-`,
+      }
+
+      runTests(config)
+    })
+  })
+})

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,
 }

e2e-tests/development-runtime/cypress/support/commands.js

@@ -24,7 +24,7 @@ Cypress.Commands.add(`lifecycleCallOrder`, expectedActionCallOrder =>
     if (expectedActionCallOrderLength > actionsLength) {
       return false
     }
-
+    
     let prevActionIndex = -1
     for (let i = 0; i < actionsLength; i += 1) {
       const nextActionIndex = prevActionIndex + 1
@@ -81,29 +81,6 @@ Cypress.Commands.add(
   }
 )
 
-Cypress.Commands.add(`assertRoute`, route => {
+Cypress.Commands.add(`assertRoute`, (route) => {
   cy.url().should(`equal`, `${window.location.origin}${route}`)
 })
-
-// react-error-overlay is iframe, so this is just convenience helper
-// https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/#custom-command
-Cypress.Commands.add(`getOverlayIframe`, () => {
-  // get the iframe > document > body
-  // and retry until the body element is not empty
-  return (
-    cy
-      .get(`iframe`, { log: true, timeout: 150000 })
-      .its(`0.contentDocument.body`)
-      .should(`not.be.empty`)
-      // wraps "body" DOM element to allow
-      // chaining more Cypress commands, like ".find(...)"
-      // https://on.cypress.io/wrap
-      .then(cy.wrap, { log: true })
-  )
-})
-
-Cypress.Commands.add(`assertNoOverlayIframe`, () => {
-  // get the iframe > document > body
-  // and retry until the body element is not empty
-  return cy.get(`iframe`, { log: true, timeout: 15000 }).should(`not.exist`)
-})

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

@@ -134,4 +134,49 @@ exports.onCreatePage = async ({ page, actions }) => {
       },
     })
   }
+
+  if (page.path.includes(`query-data-caches`)) {
+    if (page.path.includes(`with-trailing-slash`)) {
+      // just make sure it actually has trailing slash
+      const hasTrailingSlash = /\/$/.test(page.path)
+      if (!hasTrailingSlash) {
+        throw new Error(
+          `Page reporting to have trailing slash, doesn't have it`
+        )
+      }
+    }
+
+    if (page.path.includes(`no-trailing-slash`)) {
+      // strip both slashes
+      deletePage(page)
+      createPage({
+        ...page,
+        path: page.path.replace(/\/$/, ``),
+      })
+    }
+  }
+}
+
+exports.createResolvers = ({ createResolvers }) => {
+  const resolvers = {
+    QueryDataCachesJson: {
+      // this field doesn't do anything useful on its own
+      // it's only added so we can use it to make sure query text
+      // in various queries used by `query-data-caches` is different
+      // at least a little bit, so the static queries is different
+      // between initial and second page
+      dummy: {
+        type: `String`,
+        args: {
+          text: {
+            type: `String`,
+          },
+        },
+        resolve(_source, args) {
+          return args.text
+        },
+      },
+    },
+  }
+  createResolvers(resolvers)
 }

e2e-tests/development-runtime/package.json

@@ -5,15 +5,15 @@
   "author": "Dustin Schau <dustin@gatsbyjs.com>",
   "dependencies": {
     "gatsby": "^2.4.4",
-    "gatsby-plugin-image": "^0.0.2",
     "gatsby-image": "^2.0.41",
+    "gatsby-plugin-image": "^0.0.2",
     "gatsby-plugin-manifest": "^2.0.17",
     "gatsby-plugin-offline": "^2.1.0",
     "gatsby-plugin-react-helmet": "^3.0.6",
     "gatsby-plugin-sharp": "^2.0.37",
     "gatsby-seo": "^0.1.0",
     "gatsby-source-filesystem": "^2.0.33",
-    "gatsby-transformer-json": "^2.4.14",
+    "gatsby-transformer-json": "^2.5.0",
     "gatsby-transformer-remark": "^2.3.12",
     "gatsby-transformer-sharp": "^2.1.19",
     "isomorphic-fetch": "^2.2.1",

e2e-tests/development-runtime/scripts/update.js

@@ -34,29 +34,13 @@ const args = yargs
     `
     ).trim(),
     type: `string`,
-  })
-  .option(`restore`, {
-    default: false,
-    type: `boolean`,
   }).argv
 
 async function update() {
   const history = await getHistory()
 
-  const { file: fileArg, replacements, restore } = args
+  const { file: fileArg, replacements } = args
   const filePath = path.resolve(fileArg)
-  if (restore) {
-    const original = history.get(filePath)
-    if (original) {
-      await fs.writeFile(filePath, original, `utf-8`)
-    } else if (original === false) {
-      await fs.remove(filePath)
-    } else {
-      console.log(`Didn't make changes to "${fileArg}". Nothing to restore.`)
-    }
-    history.delete(filePath)
-    return
-  }
   let exists = true
   if (!fs.existsSync(filePath)) {
     exists = false
@@ -66,7 +50,7 @@ async function update() {
       `utf8`
     )
   }
-  let file = await fs.readFile(filePath, `utf8`)
+  const file = await fs.readFile(filePath, `utf8`)
 
   if (!history.has(filePath)) {
     history.set(filePath, exists ? file : false)

e2e-tests/development-runtime/src/components/query-data-caches/static-query-404-history.js

@@ -0,0 +1,13 @@
+import { graphql, useStaticQuery } from "gatsby"
+
+export function use404HistoryStaticQuery() {
+  return useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-404-to-B-to-404-history" }
+      ) {
+        ...QueryDataCachesFragmentInitialPage
+      }
+    }
+  `)
+}

e2e-tests/development-runtime/src/components/query-data-caches/static-query-404-link.js

@@ -0,0 +1,13 @@
+import { graphql, useStaticQuery } from "gatsby"
+
+export function use404LinkStaticQuery() {
+  return useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-404-to-B-to-404-link" }
+      ) {
+        ...QueryDataCachesFragmentInitialPage
+      }
+    }
+  `)
+}

e2e-tests/development-runtime/src/components/query-data-caches/view.js

@@ -0,0 +1,65 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+export function QueryDataCachesView({
+  data,
+  pageType,
+  dataType,
+  path,
+  prefix = ``,
+}) {
+  if (
+    pageType !== `A` &&
+    pageType !== `B` &&
+    pageType !== `client-only` &&
+    pageType !== `404`
+  ) {
+    throw new Error(
+      `[QueryDataCachesView] Wrong page type - ${JSON.stringify(pageType)}`
+    )
+  }
+
+  if (dataType !== `page-query` && dataType !== `static-query`) {
+    throw new Error(
+      `[QueryDataCachesView] Wrong data type - ${JSON.stringify(dataType)}`
+    )
+  }
+
+  return (
+    <>
+      <h1 data-testid={`${prefix}query-data-caches-page-title`}>
+        This is page {pageType}
+      </h1>
+      <h2>Page query</h2>
+      <p>
+        <span data-testid={`${prefix}${dataType}-result`}>
+          {data.queryDataCachesJson.selector} /{` `}
+          {data.queryDataCachesJson.initialOrSecond}:{` `}
+          {data.queryDataCachesJson.status}
+        </span>
+      </p>
+      {path && (
+        <p>
+          Canonical path: <span data-testid={`${prefix}page-path`}>{path}</span>
+        </p>
+      )}
+    </>
+  )
+}
+
+export const fragments = graphql`
+  fragment QueryDataCachesBaseFragment on QueryDataCachesJson {
+    selector
+    status
+  }
+
+  fragment QueryDataCachesFragmentInitialPage on QueryDataCachesJson {
+    ...QueryDataCachesBaseFragment
+    initialOrSecond: dummy(text: "initial-page")
+  }
+
+  fragment QueryDataCachesFragmentSecondPage on QueryDataCachesJson {
+    ...QueryDataCachesBaseFragment
+    initialOrSecond: dummy(text: "second-page")
+  }
+`

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

@@ -1,14 +1,86 @@
 import React from "react"
+import { graphql, Link } from "gatsby"
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 
-const NotFoundPage = () => (
+import { QueryDataCachesView } from "../components/query-data-caches/view"
+import { use404LinkStaticQuery } from "../components/query-data-caches/static-query-404-link"
+import { use404HistoryStaticQuery } from "../components/query-data-caches/static-query-404-history"
+
+// FIXME: implementation showing 404 page is special cased and doesn't have all the props that other pages have
+// in particular `path` and `uri` props are missing. This is just a hack to show canonical path of the 404 page
+// in QueryDataCachesView helper component
+const path = `/404.html`
+
+function QueryDataCachesWrapper({ data, slug, prefix, ...rest }) {
+  return (
+    <fieldset>
+      <legend>{slug}</legend>
+      <QueryDataCachesView
+        data={{ queryDataCachesJson: data }}
+        pageType="404"
+        path={path}
+        prefix={prefix}
+        {...rest}
+      />
+
+      {/* <pre>{JSON.stringify({ data, path }, null, 2)}</pre> */}
+    </fieldset>
+  )
+}
+
+const NotFoundPage = ({ data }) => (
   <Layout>
     <SEO title="404: Not found" />
     <h1 data-testid="page-title">NOT FOUND</h1>
     <p>You just hit a route that does not exist... the sadness.</p>
+    <fieldset>
+      <legend>query-data-caches</legend>
+      <QueryDataCachesWrapper
+        data={data.pageLink}
+        slug="page-query-404-to-B-to-404-link"
+        dataType="page-query"
+        prefix="page-link-"
+      />
+      <QueryDataCachesWrapper
+        data={use404LinkStaticQuery().queryDataCachesJson}
+        slug="static-query-404-to-B-to-404-link"
+        dataType="static-query"
+        prefix="static-link-"
+      />
+      <QueryDataCachesWrapper
+        data={data.pageHistory}
+        slug="page-query-404-to-B-to-404-history"
+        dataType="page-query"
+        prefix="page-history-"
+      />
+      <QueryDataCachesWrapper
+        data={use404HistoryStaticQuery().queryDataCachesJson}
+        slug="static-query-404-to-B-to-404-history"
+        dataType="static-query"
+        prefix="static-history-"
+      />
+      <Link to="../page-B" data-testid="page-b-link">
+        Go to page B
+      </Link>
+    </fieldset>
   </Layout>
 )
 
 export default NotFoundPage
+
+export const query = graphql`
+  {
+    pageLink: queryDataCachesJson(
+      selector: { eq: "page-query-404-to-B-to-404-link" }
+    ) {
+      ...QueryDataCachesFragmentInitialPage
+    }
+    pageHistory: queryDataCachesJson(
+      selector: { eq: "page-query-404-to-B-to-404-history" }
+    ) {
+      ...QueryDataCachesFragmentInitialPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-404-to-B-to-404-history/page-B.js

@@ -0,0 +1,27 @@
+import React from "react"
+import { graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQuery404toBto404HistoryPageB({ data, path }) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="page-query"
+        path={path}
+        prefix="page-history-"
+      />
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(
+      selector: { eq: "page-query-404-to-B-to-404-history" }
+    ) {
+      ...QueryDataCachesFragmentSecondPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-404-to-B-to-404-link/page-B.js

@@ -0,0 +1,28 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQuery404toBto404LinkPageB({ data, path }) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="page-query"
+        path={path}
+        prefix="page-link-"
+      />
+      <Link to="../page-A" data-testid="page-a-link">
+        Go back to page A
+      </Link>
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(selector: { eq: "page-query-404-to-B-to-404-link" }) {
+      ...QueryDataCachesFragmentSecondPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-CO-to-B-to-CO-history/[client-only].js

@@ -0,0 +1,27 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQueryCOtoBtoCOHistoryPageA({ data, path }) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="client-only"
+        dataType="page-query"
+        path={path}
+      />
+      <Link to="../page-B" data-testid="page-b-link">
+        Go to page B
+      </Link>
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(selector: { eq: "page-query-CO-to-B-to-CO-history" }) {
+      ...QueryDataCachesFragmentInitialPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-CO-to-B-to-CO-history/page-B.js

@@ -0,0 +1,24 @@
+import React from "react"
+import { graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQueryCOtoBtoCOHistoryPageB({ data, path }) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="page-query"
+        path={path}
+      />
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(selector: { eq: "page-query-CO-to-B-to-CO-history" }) {
+      ...QueryDataCachesFragmentSecondPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-CO-to-B-to-CO-link/[client-only].js

@@ -0,0 +1,27 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQueryCOtoBtoCOLinkPageA({ data, path }) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="client-only"
+        dataType="page-query"
+        path={path}
+      />
+      <Link to="../page-B" data-testid="page-b-link">
+        Go to page B
+      </Link>
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(selector: { eq: "page-query-CO-to-B-to-CO-link" }) {
+      ...QueryDataCachesFragmentInitialPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-CO-to-B-to-CO-link/page-B.js

@@ -0,0 +1,27 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQueryCOtoBtoCOLinkPageB({ data, path }) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="page-query"
+        path={path}
+      />
+      <Link to="../page-A" data-testid="page-a-link">
+        Go back to page A
+      </Link>
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(selector: { eq: "page-query-CO-to-B-to-CO-link" }) {
+      ...QueryDataCachesFragmentSecondPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-no-trailing-slash-A-to-B-to-A-history/page-A.js

@@ -0,0 +1,32 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQueryNoTrailingSlashAtoBtoAHistoryPageA({
+  data,
+  path,
+}) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="A"
+        dataType="page-query"
+        path={path}
+      />
+      <Link to="../page-B" data-testid="page-b-link">
+        Go to page B
+      </Link>
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(
+      selector: { eq: "page-query-no-trailing-slash-A-to-B-to-A-history" }
+    ) {
+      ...QueryDataCachesFragmentInitialPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-no-trailing-slash-A-to-B-to-A-history/page-B.js

@@ -0,0 +1,29 @@
+import React from "react"
+import { graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQueryNoTrailingSlashAtoBtoAHistoryPageB({
+  data,
+  path,
+}) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="page-query"
+        path={path}
+      />
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(
+      selector: { eq: "page-query-no-trailing-slash-A-to-B-to-A-history" }
+    ) {
+      ...QueryDataCachesFragmentSecondPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-no-trailing-slash-A-to-B-to-A-link/page-A.js

@@ -0,0 +1,32 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQueryNoTrailingSlashAtoBtoALinkPageA({
+  data,
+  path,
+}) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="A"
+        dataType="page-query"
+        path={path}
+      />
+      <Link to="../page-B" data-testid="page-b-link">
+        Go to page B
+      </Link>
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(
+      selector: { eq: "page-query-no-trailing-slash-A-to-B-to-A-link" }
+    ) {
+      ...QueryDataCachesFragmentInitialPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-no-trailing-slash-A-to-B-to-A-link/page-B.js

@@ -0,0 +1,32 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQueryNoTrailingSlashAtoBtoALinkPageB({
+  data,
+  path,
+}) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="page-query"
+        path={path}
+      />
+      <Link to="../page-A" data-testid="page-a-link">
+        Go back to page A
+      </Link>
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(
+      selector: { eq: "page-query-no-trailing-slash-A-to-B-to-A-link" }
+    ) {
+      ...QueryDataCachesFragmentSecondPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-with-trailing-slash-A-to-B-to-A-history/page-A.js

@@ -0,0 +1,32 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQueryWithTrailingSlashAtoBtoAHistoryPageA({
+  data,
+  path,
+}) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="A"
+        dataType="page-query"
+        path={path}
+      />
+      <Link to="../page-B" data-testid="page-b-link">
+        Go to page B
+      </Link>
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(
+      selector: { eq: "page-query-with-trailing-slash-A-to-B-to-A-history" }
+    ) {
+      ...QueryDataCachesFragmentInitialPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-with-trailing-slash-A-to-B-to-A-history/page-B.js

@@ -0,0 +1,29 @@
+import React from "react"
+import { graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQueryWithTrailingSlashAtoBtoAHistoryPageB({
+  data,
+  path,
+}) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="page-query"
+        path={path}
+      />
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(
+      selector: { eq: "page-query-with-trailing-slash-A-to-B-to-A-history" }
+    ) {
+      ...QueryDataCachesFragmentSecondPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-with-trailing-slash-A-to-B-to-A-link/page-A.js

@@ -0,0 +1,32 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQueryWithTrailingSlashAtoBtoALinkPageA({
+  data,
+  path,
+}) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="A"
+        dataType="page-query"
+        path={path}
+      />
+      <Link to="../page-B" data-testid="page-b-link">
+        Go to page B
+      </Link>
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(
+      selector: { eq: "page-query-with-trailing-slash-A-to-B-to-A-link" }
+    ) {
+      ...QueryDataCachesFragmentInitialPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/page-query-with-trailing-slash-A-to-B-to-A-link/page-B.js

@@ -0,0 +1,32 @@
+import React from "react"
+import { Link, graphql } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function PageQueryWithTrailingSlashAtoBtoALinkPageB({
+  data,
+  path,
+}) {
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="page-query"
+        path={path}
+      />
+      <Link to="../page-A" data-testid="page-a-link">
+        Go back to page A
+      </Link>
+    </>
+  )
+}
+
+export const query = graphql`
+  {
+    queryDataCachesJson(
+      selector: { eq: "page-query-with-trailing-slash-A-to-B-to-A-link" }
+    ) {
+      ...QueryDataCachesFragmentSecondPage
+    }
+  }
+`

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-404-to-B-to-404-history/page-B.js

@@ -0,0 +1,27 @@
+import React from "react"
+import { graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQuery404toBto404HistoryPageB({ path }) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-404-to-B-to-404-history" }
+      ) {
+        ...QueryDataCachesFragmentSecondPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="static-query"
+        path={path}
+        prefix="static-history-"
+      />
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-404-to-B-to-404-link/page-B.js

@@ -0,0 +1,30 @@
+import React from "react"
+import { Link, graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQuery404toBto404LinkPageB({ path }) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-404-to-B-to-404-link" }
+      ) {
+        ...QueryDataCachesFragmentSecondPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="static-query"
+        path={path}
+        prefix="static-link-"
+      />
+      <Link to="../page-A" data-testid="page-a-link">
+        Go back to page A
+      </Link>
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-CO-to-B-to-CO-history/[client-only].js

@@ -0,0 +1,29 @@
+import React from "react"
+import { Link, graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQueryCOtoBtoCOHistoryPageA({ path }) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-CO-to-B-to-CO-history" }
+      ) {
+        ...QueryDataCachesFragmentInitialPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="client-only"
+        dataType="static-query"
+        path={path}
+      />
+      <Link to="../page-B" data-testid="page-b-link">
+        Go to page B
+      </Link>
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-CO-to-B-to-CO-history/page-B.js

@@ -0,0 +1,26 @@
+import React from "react"
+import { graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQueryCOtoBtoCOHistoryPageB({ path }) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-CO-to-B-to-CO-history" }
+      ) {
+        ...QueryDataCachesFragmentSecondPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="static-query"
+        path={path}
+      />
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-CO-to-B-to-CO-link/[client-only].js

@@ -0,0 +1,27 @@
+import React from "react"
+import { Link, graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQueryCOtoBtoCOLinkPageA({ path }) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(selector: { eq: "static-query-CO-to-B-to-CO-link" }) {
+        ...QueryDataCachesFragmentInitialPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="client-only"
+        dataType="static-query"
+        path={path}
+      />
+      <Link to="../page-B" data-testid="page-b-link">
+        Go to page B
+      </Link>
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-CO-to-B-to-CO-link/page-B.js

@@ -0,0 +1,27 @@
+import React from "react"
+import { Link, graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQueryCOtoBtoCOLinkPageB({ path }) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(selector: { eq: "static-query-CO-to-B-to-CO-link" }) {
+        ...QueryDataCachesFragmentSecondPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="static-query"
+        path={path}
+      />
+      <Link to="../page-A" data-testid="page-a-link">
+        Go back to page A
+      </Link>
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-no-trailing-slash-A-to-B-to-A-history/page-A.js

@@ -0,0 +1,31 @@
+import React from "react"
+import { Link, graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQueryNoTrailingSlashAtoBtoAHistoryPageA({
+  path,
+}) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-no-trailing-slash-A-to-B-to-A-history" }
+      ) {
+        ...QueryDataCachesFragmentInitialPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="A"
+        dataType="static-query"
+        path={path}
+      />
+      <Link to="../page-B" data-testid="page-b-link">
+        Go to page B
+      </Link>
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-no-trailing-slash-A-to-B-to-A-history/page-B.js

@@ -0,0 +1,28 @@
+import React from "react"
+import { graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQueryNoTrailingSlashAtoBtoAHistoryPageB({
+  path,
+}) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-no-trailing-slash-A-to-B-to-A-history" }
+      ) {
+        ...QueryDataCachesFragmentSecondPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="static-query"
+        path={path}
+      />
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-no-trailing-slash-A-to-B-to-A-link/page-A.js

@@ -0,0 +1,29 @@
+import React from "react"
+import { Link, graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQueryNoTrailingSlashAtoBtoALinkPageA({ path }) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-no-trailing-slash-A-to-B-to-A-link" }
+      ) {
+        ...QueryDataCachesFragmentInitialPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="A"
+        dataType="static-query"
+        path={path}
+      />
+      <Link to="../page-B" data-testid="page-b-link">
+        Go to page B
+      </Link>
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-no-trailing-slash-A-to-B-to-A-link/page-B.js

@@ -0,0 +1,29 @@
+import React from "react"
+import { Link, graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQueryNoTrailingSlashAtoBtoALinkPageB({ path }) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-no-trailing-slash-A-to-B-to-A-link" }
+      ) {
+        ...QueryDataCachesFragmentSecondPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="static-query"
+        path={path}
+      />
+      <Link to="../page-A" data-testid="page-a-link">
+        Go back to page A
+      </Link>
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-with-trailing-slash-A-to-B-to-A-history/page-A.js

@@ -0,0 +1,31 @@
+import React from "react"
+import { Link, graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQueryWithTrailingSlashAtoBtoAHistoryPageA({
+  path,
+}) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-with-trailing-slash-A-to-B-to-A-history" }
+      ) {
+        ...QueryDataCachesFragmentInitialPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="A"
+        dataType="static-query"
+        path={path}
+      />
+      <Link to="../page-B" data-testid="page-b-link">
+        Go to page B
+      </Link>
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-with-trailing-slash-A-to-B-to-A-history/page-B.js

@@ -0,0 +1,28 @@
+import React from "react"
+import { graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQueryWithTrailingSlashAtoBtoAHistoryPageB({
+  path,
+}) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-with-trailing-slash-A-to-B-to-A-history" }
+      ) {
+        ...QueryDataCachesFragmentSecondPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="static-query"
+        path={path}
+      />
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-with-trailing-slash-A-to-B-to-A-link/page-A.js

@@ -0,0 +1,29 @@
+import React from "react"
+import { Link, graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQueryWithTrailingSlashAtoBtoALinkPageA({ path }) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-with-trailing-slash-A-to-B-to-A-link" }
+      ) {
+        ...QueryDataCachesFragmentInitialPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="A"
+        dataType="static-query"
+        path={path}
+      />
+      <Link to="../page-B" data-testid="page-b-link">
+        Go to page B
+      </Link>
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/query-data-caches/static-query-with-trailing-slash-A-to-B-to-A-link/page-B.js

@@ -0,0 +1,29 @@
+import React from "react"
+import { Link, graphql, useStaticQuery } from "gatsby"
+import { QueryDataCachesView } from "../../../components/query-data-caches/view"
+
+export default function StaticQueryWithTrailingSlashAtoBtoALinkPageB({ path }) {
+  const data = useStaticQuery(graphql`
+    {
+      queryDataCachesJson(
+        selector: { eq: "static-query-with-trailing-slash-A-to-B-to-A-link" }
+      ) {
+        ...QueryDataCachesFragmentSecondPage
+      }
+    }
+  `)
+
+  return (
+    <>
+      <QueryDataCachesView
+        data={data}
+        pageType="B"
+        dataType="static-query"
+        path={path}
+      />
+      <Link to="../page-A" data-testid="page-a-link">
+        Go back to page A
+      </Link>
+    </>
+  )
+}

examples/using-sqip/.gitignore → e2e-tests/mdx-less-babel/.gitignore

@@ -6,3 +6,6 @@ yarn-error.log
 # Build directory
 /public
 .DS_Store
+
+# Cypress output
+cypress/videos/

e2e-tests/mdx-less-babel/cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:9000"
+}

e2e-tests/mdx-less-babel/cypress/integration/pages.js

@@ -0,0 +1,38 @@
+/* global cy */
+
+describe(`Pages`, () => {
+    it(`can be created with MDX`, () => {
+        cy.visit(`/`).waitForRouteChange()
+        cy.get(`h2`).invoke(`text`).should(`eq`, `Do you work`)
+    })
+
+    it(`can include shortcode component`, () => {
+        cy.visit(`/`).waitForRouteChange()
+        cy.getTestElement(`shortcode`).contains(`I am an example of a component in MDX.`)
+    })
+
+    it(`can include external import`, () => {
+        cy.visit(`/`).waitForRouteChange()
+        cy.getTestElement(`external`).contains(`Now an external import`)
+    })
+
+    it (`generates slug for mdx in pages dir`, () => {
+        cy.visit(`/list`).waitForRouteChange()
+        cy.getTestElement(`mdx-slug`).contains(`another`)
+    })
+
+    it (`generates complex slug with md extension`, () => {
+        cy.visit(`/list`).waitForRouteChange()
+        cy.getTestElement(`md-slug`).contains(`my-blog`)
+    })
+
+    it (`generates a slug with an index file`, () => {
+        cy.visit(`/list`).waitForRouteChange()
+        cy.getTestElement(`complex-slug`).contains(`about`)
+    })
+
+    it (`generates a slug with a slash`, () => {
+        cy.visit(`/list`).waitForRouteChange()
+        cy.getTestElement(`embed-slug`).contains(`about/embedded`)
+    })
+})

e2e-tests/mdx-less-babel/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

e2e-tests/mdx-less-babel/cypress/support/index.js

@@ -0,0 +1,16 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import "gatsby-cypress"

e2e-tests/mdx-less-babel/gatsby-config.js

@@ -0,0 +1,44 @@
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby MDX e2e`,
+  },
+  plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `pages`,
+        path: `${__dirname}/src/pages/`,
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `pages`,
+        path: `${__dirname}/src/posts`,
+      },
+    },
+    {
+      resolve: `gatsby-plugin-mdx`,
+      options: {
+        lessBabel: true,
+        extensions: [`.mdx`, `.md`],
+        defaultLayouts: {
+          default: require.resolve("./src/components/layout.js"),
+        },
+        remarkPlugins: [remarkRequireFilePathPlugin],
+      },
+    },
+  ],
+}
+
+/**
+ * This is a test to ensure that `gatsby-plugin-mdx` correctly pass the `file` argument to the underlying remark plugins.
+ * See #26914 for more info.
+ */
+function remarkRequireFilePathPlugin() {
+  return function transformer(tree, file) {
+    if (!file.dirname) {
+      throw new Error("No directory name for this markdown file!")
+    }
+  }
+}

e2e-tests/mdx-less-babel/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "gatsby-mdx-tester",
+  "description": "Gatsby MDX tester",
+  "version": "1.0.0",
+  "dependencies": {
+    "@mdx-js/mdx": "^1.6.6",
+    "@mdx-js/react": "^1.6.6",
+    "cypress": "^3.1.0",
+    "gatsby": "^2.0.118",
+    "gatsby-plugin-mdx": "^1.2.19",
+    "gatsby-source-filesystem": "^2.3.14",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "theme-ui": "^0.3.1"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "format": "prettier --write '**/*.js'",
+    "test": "cross-env CYPRESS_SUPPORT=y npm run build && npm run start-server-and-test",
+    "start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run",
+    "serve": "gatsby serve",
+    "cy:open": "cypress open",
+    "cy:run": "(is-ci && cypress run --browser chrome --record) || cypress run --browser chrome"
+  },
+  "devDependencies": {
+    "cross-env": "^5.2.0",
+    "gatsby-cypress": "^0.1.7",
+    "is-ci": "^2.0.0",
+    "prettier": "2.0.4",
+    "start-server-and-test": "^1.7.1"
+  }
+}

e2e-tests/mdx-less-babel/src/components/example.js

@@ -0,0 +1,7 @@
+import React from "react"
+
+const Example = () => (
+    <div data-testid="shortcode">I am an example of a component in MDX.</div>
+)
+
+export default Example

e2e-tests/mdx-less-babel/src/components/layout.js

@@ -0,0 +1,10 @@
+import React from "react"
+import { MDXProvider } from "@mdx-js/react"
+import Example from "./example"
+
+const shortcodes = { Example }
+export default function Layout({ children }) {
+    return (
+        <MDXProvider components={shortcodes}>{children}</MDXProvider>
+    )
+}

e2e-tests/mdx-less-babel/src/pages/another.mdx

@@ -0,0 +1 @@
+This is to add another source page for slugification.

e2e-tests/mdx-less-babel/src/pages/index.mdx

@@ -0,0 +1,17 @@
+import { Message } from "theme-ui"
+
+Let's go MDX!
+
+## Do you work
+
+- nobody knows
+
+````
+```javascript
+const codefence = true
+```
+````
+
+<Example/>
+
+<Message data-testid="external">Now an external import</Message>

e2e-tests/mdx-less-babel/src/pages/list.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+
+const ListPage = ({ data }) => {
+  const anotherPage = data.another.nodes[0]
+  const blogPage = data.blog.nodes[0]
+  const aboutPage = data.complex.nodes[0]
+  const embedPage = data.embed.nodes[0]
+
+
+  return (
+    <div>
+      <div data-testid="mdx-slug">{anotherPage.slug}</div>
+      <div data-testid="md-slug">{blogPage.slug}</div>
+      <div data-testid="complex-slug">{aboutPage.slug}</div>
+      <div data-testid="embed-slug">{embedPage.slug}</div>
+
+    </div>
+  )
+}
+
+export const query = graphql`
+{
+    another: allMdx(filter: {slug: {eq: "another"}}) {
+      nodes {
+        slug
+      }
+    }
+    blog: allMdx(filter: {slug: {eq: "my-blog"}}) {
+      nodes {
+        slug
+      }
+    }
+    complex: allMdx(filter: {slug: {eq: "about/"}}) {
+      nodes {
+        slug
+      }
+    }
+    embed: allMdx(filter: {slug: {eq: "about/embedded"}}) {
+      nodes {
+        slug
+      }
+    }
+  }
+`
+export default ListPage

e2e-tests/mdx-less-babel/src/posts/about/embedded.mdx

@@ -0,0 +1 @@
+This is a page that should include a slash slug

e2e-tests/mdx-less-babel/src/posts/about/index.mdx

@@ -0,0 +1 @@
+This should be an about page we can access with a nested slug.

e2e-tests/mdx-less-babel/src/posts/my-blog.md

@@ -0,0 +1 @@
+Let's see if we can generate a slug for this too

e2e-tests/mdx/gatsby-config.js

@@ -20,6 +20,7 @@ module.exports = {
     {
       resolve: `gatsby-plugin-mdx`,
       options: {
+        lessBabel: false,
         extensions: [`.mdx`, `.md`],
         defaultLayouts: {
           default: require.resolve("./src/components/layout.js"),

examples/client-only-paths/package.json

@@ -5,9 +5,9 @@
   "version": "1.0.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "gatsby": "^2.24.63",
-    "gatsby-plugin-netlify": "^2.3.15",
-    "gatsby-plugin-typography": "^2.5.11",
+    "gatsby": "next",
+    "gatsby-plugin-netlify": "next",
+    "gatsby-plugin-typography": "next",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
     "react-transition-group": "^2.9.0",

examples/creating-source-plugins/example-site/package.json

@@ -14,10 +14,10 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
-    "gatsby": "^2.24.63",
-    "gatsby-image": "^2.4.19",
-    "gatsby-plugin-sharp": "^2.6.36",
-    "gatsby-transformer-sharp": "^2.5.15",
+    "gatsby": "next",
+    "gatsby-image": "next",
+    "gatsby-plugin-sharp": "next",
+    "gatsby-transformer-sharp": "next",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },

examples/creating-source-plugins/source-plugin/package.json

@@ -19,7 +19,7 @@
     "apollo-link-http": "^1.5.17",
     "apollo-link-ws": "^1.0.20",
     "apollo-utilities": "^1.3.4",
-    "gatsby-source-filesystem": "^2.3.30",
+    "gatsby-source-filesystem": "next",
     "graphql": "^15.3.0",
     "graphql-tag": "^2.11.0",
     "node-fetch": "^2.6.1",

examples/data-fetching/package.json

@@ -6,9 +6,9 @@
   "author": "@gatsbyjs",
   "dependencies": {
     "dotenv": "^8.2.0",
-    "gatsby": "^2.24.63",
-    "gatsby-plugin-react-helmet": "^3.3.11",
-    "gatsby-source-graphql": "^2.7.4",
+    "gatsby": "next",
+    "gatsby-plugin-react-helmet": "next",
+    "gatsby-source-graphql": "next",
     "prop-types": "^15.7.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",

examples/ecommerce-tutorial-with-stripe/package.json

@@ -6,15 +6,15 @@
   "author": "@thorwebdev",
   "dependencies": {
     "@stripe/stripe-js": "^1.9.0",
-    "gatsby": "^2.24.63",
-    "gatsby-image": "^2.4.19",
-    "gatsby-plugin-manifest": "^2.4.30",
-    "gatsby-plugin-offline": "^2.2.10",
-    "gatsby-plugin-react-helmet": "^3.3.11",
-    "gatsby-plugin-sharp": "^2.6.36",
-    "gatsby-source-filesystem": "^2.3.30",
+    "gatsby": "next",
+    "gatsby-image": "next",
+    "gatsby-plugin-manifest": "next",
+    "gatsby-plugin-offline": "next",
+    "gatsby-plugin-react-helmet": "next",
+    "gatsby-plugin-sharp": "next",
+    "gatsby-source-filesystem": "next",
     "gatsby-source-stripe": "^3.1.1",
-    "gatsby-transformer-sharp": "^2.5.15",
+    "gatsby-transformer-sharp": "next",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

examples/feed/package.json

@@ -5,10 +5,10 @@
   "version": "1.0.0",
   "author": "Nicholas Young <nicholas@nicholaswyoung.com>",
   "dependencies": {
-    "gatsby": "^2.24.63",
-    "gatsby-plugin-feed": "^2.5.12",
-    "gatsby-source-filesystem": "^2.3.30",
-    "gatsby-transformer-remark": "^2.8.35",
+    "gatsby": "next",
+    "gatsby-plugin-feed": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-remark": "next",
     "react": "^16.4.1",
     "react-dom": "^16.4.1"
   },

examples/gatsbygram/package.json

@@ -6,18 +6,18 @@
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
     "core-js": "^2.6.11",
-    "gatsby": "^2.24.63",
-    "gatsby-core-utils": "^1.3.20",
-    "gatsby-image": "^2.4.19",
-    "gatsby-plugin-glamor": "^2.3.11",
-    "gatsby-plugin-google-analytics": "^2.3.14",
-    "gatsby-plugin-manifest": "^2.4.30",
-    "gatsby-plugin-offline": "^2.2.10",
-    "gatsby-plugin-sharp": "^2.6.36",
-    "gatsby-plugin-typography": "^2.5.11",
-    "gatsby-source-filesystem": "^2.3.30",
-    "gatsby-transformer-json": "^2.4.12",
-    "gatsby-transformer-sharp": "^2.5.15",
+    "gatsby": "next",
+    "gatsby-core-utils": "next",
+    "gatsby-image": "next",
+    "gatsby-plugin-glamor": "next",
+    "gatsby-plugin-google-analytics": "next",
+    "gatsby-plugin-manifest": "next",
+    "gatsby-plugin-offline": "next",
+    "gatsby-plugin-sharp": "next",
+    "gatsby-plugin-typography": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-json": "next",
+    "gatsby-transformer-sharp": "next",
     "glamor": "^2.20.40",
     "instagram-screen-scrape": "^2.0.0",
     "lodash": "^4.17.20",

examples/graphql-reference/package.json

@@ -5,16 +5,16 @@
   "version": "0.1.0",
   "author": "LekoArts <hello@lekoarts.de>",
   "dependencies": {
-    "gatsby": "^2.24.63",
-    "gatsby-image": "^2.4.19",
-    "gatsby-plugin-react-helmet": "^3.3.11",
-    "gatsby-plugin-sharp": "^2.6.36",
-    "gatsby-plugin-typography": "^2.5.11",
-    "gatsby-remark-responsive-iframe": "^2.4.14",
-    "gatsby-source-filesystem": "^2.3.30",
-    "gatsby-transformer-remark": "^2.8.35",
-    "gatsby-transformer-sharp": "^2.5.15",
-    "gatsby-transformer-yaml": "^2.4.12",
+    "gatsby": "next",
+    "gatsby-image": "next",
+    "gatsby-plugin-react-helmet": "next",
+    "gatsby-plugin-sharp": "next",
+    "gatsby-plugin-typography": "next",
+    "gatsby-remark-responsive-iframe": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-remark": "next",
+    "gatsby-transformer-sharp": "next",
+    "gatsby-transformer-yaml": "next",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-helmet": "^5.2.1",

examples/hn/package.json

@@ -6,10 +6,10 @@
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
     "flat": "^2.0.1",
-    "gatsby": "^2.24.63",
-    "gatsby-core-utils": "^1.3.20",
-    "gatsby-plugin-manifest": "^2.4.30",
-    "gatsby-source-hacker-news": "^2.4.11",
+    "gatsby": "next",
+    "gatsby-core-utils": "next",
+    "gatsby-plugin-manifest": "next",
+    "gatsby-source-hacker-news": "next",
     "lodash": "^4.17.20",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",

examples/image-processing/package.json

@@ -5,15 +5,15 @@
   "version": "1.0.0",
   "author": "Florian Kissling <sechskilo@gmail.com>",
   "dependencies": {
-    "gatsby": "^2.24.63",
-    "gatsby-image": "^2.4.19",
-    "gatsby-plugin-google-analytics": "^2.3.14",
-    "gatsby-plugin-offline": "^2.2.10",
-    "gatsby-plugin-sharp": "^2.6.36",
-    "gatsby-plugin-typography": "^2.5.11",
-    "gatsby-source-drupal": "^3.5.33",
-    "gatsby-source-filesystem": "^2.3.30",
-    "gatsby-transformer-sharp": "^2.5.15",
+    "gatsby": "next",
+    "gatsby-image": "next",
+    "gatsby-plugin-google-analytics": "next",
+    "gatsby-plugin-offline": "next",
+    "gatsby-plugin-sharp": "next",
+    "gatsby-plugin-typography": "next",
+    "gatsby-source-drupal": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-sharp": "next",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "react-typography": "^0.16.19",

examples/no-trailing-slashes/package.json

@@ -5,9 +5,9 @@
   "version": "1.0.0",
   "author": "Scotty Eckenthal <scott.eckenthal@gmail.com>",
   "dependencies": {
-    "gatsby": "^2.24.63",
-    "gatsby-plugin-google-analytics": "^2.3.14",
-    "gatsby-plugin-offline": "^2.2.10",
+    "gatsby": "next",
+    "gatsby-plugin-google-analytics": "next",
+    "gatsby-plugin-offline": "next",
     "lodash": "^4.17.20",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",

examples/recipe-createPage/package.json

@@ -5,7 +5,7 @@
   "version": "0.1.0",
   "author": "@gatsbyjs",
   "dependencies": {
-    "gatsby": "^2.24.63",
+    "gatsby": "next",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",

examples/recipe-linking-between-pages/package.json

@@ -5,7 +5,7 @@
   "version": "0.1.0",
   "author": "@gatsbyjs",
   "dependencies": {
-    "gatsby": "^2.24.63",
+    "gatsby": "next",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",

examples/recipe-sourcing-contentful/package.json

@@ -5,11 +5,11 @@
   "version": "0.1.0",
   "author": "@gatsbyjs",
   "dependencies": {
-    "gatsby": "^2.24.63",
-    "gatsby-image": "^2.4.19",
-    "gatsby-plugin-offline": "^2.2.10",
-    "gatsby-source-contentful": "^2.3.46",
-    "gatsby-transformer-remark": "^2.8.35",
+    "gatsby": "next",
+    "gatsby-image": "next",
+    "gatsby-plugin-offline": "next",
+    "gatsby-source-contentful": "next",
+    "gatsby-transformer-remark": "next",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"

examples/recipe-sourcing-markdown/package.json

@@ -5,9 +5,9 @@
   "version": "0.1.0",
   "author": "@gatsbyjs",
   "dependencies": {
-    "gatsby": "^2.24.63",
-    "gatsby-source-filesystem": "^2.3.30",
-    "gatsby-transformer-remark": "^2.8.35",
+    "gatsby": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-remark": "next",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",