fix(gatsby): pass serverData to Head (#37500)

* fix(gatsby): pass serverData to Head * update public HeadProps type definition * add test to e2e/dev * add test to e2e/prod * update unit tests
gatsbyjs · Jan 19, 2023 · 0017375 · 0017375
1 parent e7e5cb4
commit 0017375
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 7 deletions.
diff --git a/e2e-tests/development-runtime/cypress/integration/head-function-export/html-insertion.js b/e2e-tests/development-runtime/cypress/integration/head-function-export/html-insertion.js
@@ -97,5 +97,8 @@ describe(`Head function export html insertion`, () => {
     cy.getTestElement(`link`)
       .invoke(`attr`, `href`)
       .should(`equal`, data.ssr.link)
+    cy.getTestElement(`server-data`)
+      .invoke(`attr`, `content`)
+      .should(`equal`, JSON.stringify(data.ssr.serverData))
   })
 })
diff --git a/e2e-tests/development-runtime/shared-data/head-function-export.js b/e2e-tests/development-runtime/shared-data/head-function-export.js
@@ -50,6 +50,7 @@ const data = {
     noscript: `You may be a puzzle, but I like the way the parts fit`,
     style: `green`,
     link: `/used-by-head-function-export-ssr.css`,
+    serverData: { hello: `world` },
   },
   invalidElements: {
     title: `I should actually be inserted, unlike the others`,

diff --git a/e2e-tests/development-runtime/src/pages/head-function-export/ssr.js b/e2e-tests/development-runtime/src/pages/head-function-export/ssr.js
@@ -11,11 +11,11 @@ export default function HeadFunctionExportSSR() {
 
 export async function getServerData() {
   return {
-    hello: `world`,
+    props: data.ssr.serverData,
   }
 }
 
-export function Head() {
+export function Head({ serverData }) {
   const { base, title, meta, noscript, style, link } = data.ssr
 
   return (
@@ -32,6 +32,11 @@ export function Head() {
         `}
       </style>
       <link data-testid="link" href={link} rel="stylesheet" />
+      <meta
+        data-testid="server-data"
+        name="server-data"
+        content={JSON.stringify(serverData)}
+      />
     </>
   )
 }
diff --git a/e2e-tests/production-runtime/cypress/integration/head-function-export/html-insertion.js b/e2e-tests/production-runtime/cypress/integration/head-function-export/html-insertion.js
@@ -108,5 +108,8 @@ describe(`Head function export html insertion`, () => {
     cy.getTestElement(`link`)
       .invoke(`attr`, `href`)
       .should(`equal`, data.ssr.link)
+    cy.getTestElement(`server-data`)
+      .invoke(`attr`, `content`)
+      .should(`equal`, JSON.stringify(data.ssr.serverData))
   })
 })
diff --git a/e2e-tests/production-runtime/shared-data/head-function-export.js b/e2e-tests/production-runtime/shared-data/head-function-export.js
@@ -51,6 +51,7 @@ const data = {
     noscript: `You may be a puzzle, but I like the way the parts fit`,
     style: `green`,
     link: `/used-by-head-function-export-ssr.css`,
+    serverData: { hello: `world` },
   },
   invalidElements: {
     title: `I should actually be inserted, unlike the others`,

diff --git a/e2e-tests/production-runtime/src/pages/head-function-export/ssr.js b/e2e-tests/production-runtime/src/pages/head-function-export/ssr.js
@@ -11,11 +11,11 @@ export default function HeadFunctionExportSSR() {
 
 export async function getServerData() {
   return {
-    hello: `world`,
+    props: data.ssr.serverData,
   }
 }
 
-export function Head() {
+export function Head({ serverData }) {
   const { base, title, meta, noscript, style, link } = data.ssr
 
   return (
@@ -32,6 +32,11 @@ export function Head() {
         `}
       </style>
       <link data-testid="link" href={link} rel="stylesheet" />
+      <meta
+        data-testid="server-data"
+        name="server-data"
+        content={JSON.stringify(serverData)}
+      />
     </>
   )
 }
diff --git a/packages/gatsby/cache-dir/__tests__/head/utils.js b/packages/gatsby/cache-dir/__tests__/head/utils.js
@@ -27,7 +27,9 @@ const fullPropsExample = {
           name: `john`,
         },
       },
-      serverData: null,
+      serverData: {
+        hello: `world`,
+      },
     },
     page: {
       componentChunkName: `component---src-pages-person-name-tsx`,
@@ -53,7 +55,9 @@ const fullPropsExample = {
       name: `john`,
     },
   },
-  serverData: null,
+  serverData: {
+    hello: `world`,
+  },
   params: {
     name: `john`,
   },
@@ -114,6 +118,9 @@ describe(`head utils`, () => {
         params: {
           name: `john`,
         },
+        serverData: {
+          hello: `world`,
+        },
         data: {
           site: {
             siteMetadata: {
@@ -137,6 +144,7 @@ describe(`head utils`, () => {
           pathname: `/john/`,
         },
         params: {},
+        serverData: null,
         data: {},
         pageContext: {},
       })

diff --git a/packages/gatsby/cache-dir/head/utils.js b/packages/gatsby/cache-dir/head/utils.js
@@ -11,6 +11,7 @@ export function filterHeadProps(input) {
     },
     params: input.params,
     data: input.data || {},
+    serverData: input.serverData,
     pageContext: input.pageContext,
   }
 }

diff --git a/packages/gatsby/index.d.ts b/packages/gatsby/index.d.ts
@@ -156,7 +156,11 @@ export type PageProps<
 /**
  * A props object passed into the Head function for [Gatsby Head API](https://gatsby.dev/gatsby-head).
  */
-export type HeadProps<DataType = object, PageContextType = object> = {
+export type HeadProps<
+  DataType = object,
+  PageContextType = object,
+  ServerDataType = object
+> = {
   location: {
     /**
      * Returns the Location object's URL's path.
@@ -173,6 +177,10 @@ export type HeadProps<DataType = object, PageContextType = object> = {
    * A context object which is passed in during the creation of the page.
    */
   pageContext: PageContextType
+  /**
+   * Data passed into the page via the [getServerData](https://www.gatsbyjs.com/docs/reference/rendering-options/server-side-rendering/) SSR function.
+   */
+  serverData: ServerDataType
 }
 
 /**