From 0017375e857c929e97a19853db01188c6702df25 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Thu, 19 Jan 2023 13:35:06 +0100 Subject: [PATCH] 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 --- .../head-function-export/html-insertion.js | 3 +++ .../shared-data/head-function-export.js | 1 + .../src/pages/head-function-export/ssr.js | 9 +++++++-- .../head-function-export/html-insertion.js | 3 +++ .../shared-data/head-function-export.js | 1 + .../src/pages/head-function-export/ssr.js | 9 +++++++-- packages/gatsby/cache-dir/__tests__/head/utils.js | 12 ++++++++++-- packages/gatsby/cache-dir/head/utils.js | 1 + packages/gatsby/index.d.ts | 10 +++++++++- 9 files changed, 42 insertions(+), 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 index 97bdfc71fd078..382c52024ba8a 100644 --- 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 index b0d3aede0fcac..3dcba56ed224a 100644 --- 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 index 8c9490cd12265..b35abaf898d1f 100644 --- 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() { `} + ) } 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 index 17f56a26e7858..11d797087b229 100644 --- 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 index 5e3914fb63727..6464fd32b9c39 100644 --- 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 index 8c9490cd12265..b35abaf898d1f 100644 --- 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() { `} + ) } diff --git a/packages/gatsby/cache-dir/__tests__/head/utils.js b/packages/gatsby/cache-dir/__tests__/head/utils.js index 2bacdd76b979b..504240f9b20dc 100644 --- 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 index 1897c81595551..92809cd428b4a 100644 --- 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 index 5bf3f0c6c23c8..4c6f46b98dbe1 100644 --- 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 = { +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 = { * 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 } /**