fix(gatsby): Wrap Head with <Location> (#36160)

gatsbyjs · Jul 19, 2022 · c3c6a5b · c3c6a5b
1 parent b08ef18
commit c3c6a5b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 1 deletion.
diff --git a/e2e-tests/production-runtime/cypress/integration/head-function-export/use-location.js b/e2e-tests/production-runtime/cypress/integration/head-function-export/use-location.js
@@ -0,0 +1,13 @@
+import headFunctionExportSharedData from "../../../shared-data/head-function-export.js"
+
+it(`Page with Head Export that uses useLocation works`, () => {
+  cy.visit(headFunctionExportSharedData.page.pageWithUseLocation).waitForRouteChange()
+
+  cy.getTestElement(`location-pathname-in-template`)
+    .invoke(`text`)
+    .then(text  => {
+      cy.getTestElement(`location-pathname-in-head`)
+      .invoke(`attr`, `content`)
+      .should('equal', text)
+    })
+})
diff --git a/e2e-tests/production-runtime/shared-data/head-function-export.js b/e2e-tests/production-runtime/shared-data/head-function-export.js
@@ -12,6 +12,7 @@ const page = {
   invalidElements: `${path}/invalid-elements/`,
   fsRouteApi: `${path}/fs-route-api/`,
   deduplication: `${path}/deduplication/`,
+  pageWithUseLocation: `${path}/page-with-uselocation/`,
 }
 
 const data = {

diff --git a/e2e-tests/production-runtime/src/pages/head-function-export/page-with-uselocation.js b/e2e-tests/production-runtime/src/pages/head-function-export/page-with-uselocation.js
@@ -0,0 +1,19 @@
+import * as React from "react"
+import { useLocation } from '@gatsbyjs/reach-router';
+
+export default function HeadFunctionExportWithUseLocation() {
+  const location = useLocation();
+
+  return (
+    <>
+      <h1>I test that Head export with useLocation hook works</h1>
+      <p data-testid="location-pathname-in-template">{location.pathname}</p>
+    </>
+  )
+}
+
+export function Head() {
+  const location = useLocation();
+
+  return <meta data-testid="location-pathname-in-head" name="location" content={location.pathname}/>
+}
diff --git a/packages/gatsby/cache-dir/head/head-export-handler-for-browser.js b/packages/gatsby/cache-dir/head/head-export-handler-for-browser.js
@@ -1,6 +1,7 @@
 import React from "react"
 import { useEffect } from "react"
 import { StaticQueryContext } from "gatsby"
+import { LocationProvider } from "@gatsbyjs/reach-router"
 import { reactDOMUtils } from "../react-dom-utils"
 import { FireCallbackInEffect } from "./components/fire-callback-in-effect"
 import { VALID_NODE_NAMES } from "./constants"
@@ -81,7 +82,9 @@ export function headHandlerForBrowser({
         // In Prod we only call onHeadRendered in FireCallbackInEffect to render to head
         <FireCallbackInEffect callback={onHeadRendered}>
           <StaticQueryContext.Provider value={staticQueryResults}>
-            <Head {...filterHeadProps(pageComponentProps)} />
+            <LocationProvider>
+              <Head {...filterHeadProps(pageComponentProps)} />
+            </LocationProvider>
           </StaticQueryContext.Provider>
         </FireCallbackInEffect>,
         hiddenRoot