fix(gatsby): preserve query params on pages without trailing slashes (#…

…33811) (#33894) Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
gatsbyjs · Nov 8, 2021 · e32b355 · e32b355
1 parent 4086ca5
commit e32b355
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 3 deletions.
diff --git a/e2e-tests/production-runtime/cypress/integration/1-production.js b/e2e-tests/production-runtime/cypress/integration/1-production.js
@@ -207,4 +207,54 @@ describe(`Production build tests`, () => {
       cy.getTestElement(`404`).should(`exist`)
     })
   })
+
+  describe(`Keeps search query`, () => {
+    describe(`No trailing slash canonical path (/slashes/no-trailing)`, () => {
+      it(`/slashes/no-trailing?param=value`, () => {
+        cy.visit(`/slashes/no-trailing?param=value`).waitForRouteChange()
+
+        cy.getTestElement(`search-marker`)
+          .invoke(`text`)
+          .should(`equal`, `?param=value`)
+
+        cy.location(`pathname`).should(`equal`, `/slashes/no-trailing`)
+        cy.location(`search`).should(`equal`, `?param=value`)
+      })
+
+      it(`/slashes/no-trailing/?param=value`, () => {
+        cy.visit(`/slashes/no-trailing/?param=value`).waitForRouteChange()
+
+        cy.getTestElement(`search-marker`)
+          .invoke(`text`)
+          .should(`equal`, `?param=value`)
+
+        cy.location(`pathname`).should(`equal`, `/slashes/no-trailing`)
+        cy.location(`search`).should(`equal`, `?param=value`)
+      })
+    })
+
+    describe(`With trailing slash canonical path (/slashes/with-trailing/)`, () => {
+      it(`/slashes/with-trailing?param=value`, () => {
+        cy.visit(`/slashes/with-trailing?param=value`).waitForRouteChange()
+
+        cy.getTestElement(`search-marker`)
+          .invoke(`text`)
+          .should(`equal`, `?param=value`)
+
+        cy.location(`pathname`).should(`equal`, `/slashes/with-trailing/`)
+        cy.location(`search`).should(`equal`, `?param=value`)
+      })
+
+      it(`/slashes/with-trailing/?param=value`, () => {
+        cy.visit(`/slashes/with-trailing/?param=value`).waitForRouteChange()
+
+        cy.getTestElement(`search-marker`)
+          .invoke(`text`)
+          .should(`equal`, `?param=value`)
+
+        cy.location(`pathname`).should(`equal`, `/slashes/with-trailing/`)
+        cy.location(`search`).should(`equal`, `?param=value`)
+      })
+    })
+  })
 })
diff --git a/e2e-tests/production-runtime/gatsby-node.js b/e2e-tests/production-runtime/gatsby-node.js
@@ -130,6 +130,22 @@ exports.createPages = ({ actions: { createPage, createRedirect } }) => {
     component: path.resolve(`./.cache/static-page-from-cache.js`),
   })
 
+  {
+    const searchParamComponent = path.resolve(
+      `src/templates/search-param-render.js`
+    )
+
+    createPage({
+      path: `/slashes/no-trailing`,
+      component: searchParamComponent,
+    })
+
+    createPage({
+      path: `/slashes/with-trailing/`,
+      component: searchParamComponent,
+    })
+  }
+
   createRedirect({
     fromPath: "/pagina-larga",
     toPath: "/long-page",

diff --git a/e2e-tests/production-runtime/src/templates/search-param-render.js b/e2e-tests/production-runtime/src/templates/search-param-render.js
@@ -0,0 +1,7 @@
+import * as React from "react"
+
+const SearchParam = ({ location }) => (
+  <pre data-testid="search-marker">{location.search}</pre>
+)
+
+export default SearchParam
diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js
@@ -149,9 +149,15 @@ apiRunnerAsync(`onClientEntry`).then(() => {
       pagePath.match(/^\/offline-plugin-app-shell-fallback\/?$/)
     )
   ) {
-    navigate(__BASE_PATH__ + pagePath + browserLoc.hash, {
-      replace: true,
-    })
+    navigate(
+      __BASE_PATH__ +
+        pagePath +
+        (!pagePath.includes(`?`) ? browserLoc.search : ``) +
+        browserLoc.hash,
+      {
+        replace: true,
+      }
+    )
   }
 
   publicLoader.loadPage(browserLoc.pathname + browserLoc.search).then(page => {