From 19c9c0bb1befd573dbfb59ce3c297fe010ae17db Mon Sep 17 00:00:00 2001
From: GatsbyJS Bot <core-team@gatsbyjs.com>
Date: Mon, 18 Jul 2022 23:12:44 -0600
Subject: [PATCH] fix(gatsby): Wrap Head with <Location> (#36160) (#36165)

Co-authored-by: Jude Agboola <marvinjudehk@gmail.com>
---
 .../head-function-export/use-location.js      | 13 +++++++++++++
 .../shared-data/head-function-export.js       |  1 +
 .../page-with-uselocation.js                  | 19 +++++++++++++++++++
 .../head/head-export-handler-for-browser.js   |  5 ++++-
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 e2e-tests/production-runtime/cypress/integration/head-function-export/use-location.js
 create mode 100644 e2e-tests/production-runtime/src/pages/head-function-export/page-with-uselocation.js

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
new file mode 100644
index 0000000000000..0bc4f7730a3a8
--- /dev/null
+++ 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
index a53b7edf8ee3a..6dd60789408d8 100644
--- 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
new file mode 100644
index 0000000000000..088e4f21afad0
--- /dev/null
+++ 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}/>
+}
\ No newline at end of file
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
index d4113e15e7ff2..94d42f4ee7b02 100644
--- 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