Skip to content

Commit

Permalink
fix(gatsby): pass serverData to Head (#37500)
Browse files Browse the repository at this point in the history
* fix(gatsby): pass serverData to Head

* update public HeadProps type definition

* add test to e2e/dev

* add test to e2e/prod

* update unit tests
  • Loading branch information
pieh authored Jan 19, 2023
1 parent e7e5cb4 commit 0017375
Show file tree
Hide file tree
Showing 9 changed files with 42 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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))
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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)}
/>
</>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -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))
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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)}
/>
</>
)
}
12 changes: 10 additions & 2 deletions packages/gatsby/cache-dir/__tests__/head/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ const fullPropsExample = {
name: `john`,
},
},
serverData: null,
serverData: {
hello: `world`,
},
},
page: {
componentChunkName: `component---src-pages-person-name-tsx`,
Expand All @@ -53,7 +55,9 @@ const fullPropsExample = {
name: `john`,
},
},
serverData: null,
serverData: {
hello: `world`,
},
params: {
name: `john`,
},
Expand Down Expand Up @@ -114,6 +118,9 @@ describe(`head utils`, () => {
params: {
name: `john`,
},
serverData: {
hello: `world`,
},
data: {
site: {
siteMetadata: {
Expand All @@ -137,6 +144,7 @@ describe(`head utils`, () => {
pathname: `/john/`,
},
params: {},
serverData: null,
data: {},
pageContext: {},
})
Expand Down
1 change: 1 addition & 0 deletions packages/gatsby/cache-dir/head/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export function filterHeadProps(input) {
},
params: input.params,
data: input.data || {},
serverData: input.serverData,
pageContext: input.pageContext,
}
}
Expand Down
10 changes: 9 additions & 1 deletion packages/gatsby/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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
}

/**
Expand Down

0 comments on commit 0017375

Please sign in to comment.