Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(gatsby): pass serverData to Head #37500

Merged
merged 5 commits into from
Jan 19, 2023
Merged

fix(gatsby): pass serverData to Head #37500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bb346aa
fix(gatsby): pass serverData to Head
pieh Jan 19, 2023
b75a37c
update public HeadProps type definition
pieh Jan 19, 2023
2549e48
add test to e2e/dev
pieh Jan 19, 2023
8b8c01f
add test to e2e/prod
pieh Jan 19, 2023
2982c67
update unit tests
pieh Jan 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions e2e-tests/development-runtime/cypress/integration/head-function-export/html-insertion.js
View file
Open in desktop
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))
})
})
1 change: 1 addition & 0 deletions e2e-tests/development-runtime/shared-data/head-function-export.js
View file
Open in desktop
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
9 changes: 7 additions & 2 deletions e2e-tests/development-runtime/src/pages/head-function-export/ssr.js
View file
Open in desktop
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)}
/>
</>
)
}
3 changes: 3 additions & 0 deletions e2e-tests/production-runtime/cypress/integration/head-function-export/html-insertion.js
View file
Open in desktop
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))
})
})
1 change: 1 addition & 0 deletions e2e-tests/production-runtime/shared-data/head-function-export.js
View file
Open in desktop
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
9 changes: 7 additions & 2 deletions e2e-tests/production-runtime/src/pages/head-function-export/ssr.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is entire fix, rest is just added tests and updated HeadProps type

pageContext: input.pageContext,
}
}
Expand Down
10 changes: 9 additions & 1 deletion packages/gatsby/index.d.ts
View file
Open in desktop
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
> = {
Comment on lines -159 to +163
Copy link
Contributor Author

@pieh pieh Jan 19, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setup copied from PageProps (tho not sure if I should also add Location part, we should decide on that, because generics are position arguments, so trying to add it later would be a problem):

gatsby/packages/gatsby/index.d.ts

Lines 87 to 154 in fe65c29

export type PageProps<
DataType = object,
PageContextType = object,
LocationState = WindowLocation["state"],
ServerDataType = object
> = {
/** The path for this current page */
path: string
/** The URI for the current page */
uri: string
/** An extended version of window.document which comes from @react/router */
location: WindowLocation<LocationState>
/** A way to handle programmatically controlling navigation */
navigate: NavigateFn
/** You can't get passed children as this is the root user-land component */
children: undefined
/** The URL parameters when the page has a `matchPath` */
params: Record<string, string>
/** Holds information about the build process for this component */
pageResources: {
component: React.Component
json: {
data: DataType
pageContext: PageContextType
}
page: {
componentChunkName: string
path: string
webpackCompilationHash: string
matchPath?: string
}
}
/**
* Data passed into the page via an exported GraphQL query. To set up this type
* you need to use [generics](https://www.typescriptlang.org/play/#example/generic-functions),
* see below for an example
*
* @example
*
* import {PageProps} from "gatsby"
*
* type IndexQueryProps = { downloadCount: number }
* type IndexPageProps = PageProps<IndexQueryProps>
*
* export default (props: IndexPageProps) => {
* ..
*
*/
data: DataType
/**
* A context object which is passed in during the creation of the page. Can be extended if you are using
* `createPage` yourself using generics:
*
* @example
*
* import {PageProps} from "gatsby"
*
* type IndexQueryProps = { downloadCount: number }
* type LocaleLookUpInfo = { translationStrings: any } & { langKey: string, slug: string }
* type IndexPageProps = PageProps<IndexQueryProps, LocaleLookUpInfo>
*
* export default (props: IndexPageProps) => {
* ..
*/
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
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With Head the location will only ever be pathname so there won't be a need for LocationState generic

So we can skip that

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