[example] Support Gatsby v2

[blukai]

Closes #12320

[oliviertassinari]

This is not what I see in the docs: https://www.gatsbyjs.org/docs/ssr-apis/. Is this for v2?

[blukai]

yup, I could not get ssr to work properly for few hours, then with some random console logs I've noticed that it doesn't work at all so I tried to export it as const and it worked.

here's repo with some stuff so u can test: https://github.com/blukai/puuffin, try to change export const replaceRenderer to exports.replaceRenderer and build it (yarn build && http-server public), then go to /contact page and u'll notice (hit F5), that some styles are broken, while with export const replaceRenderer everything looks ok.

if everything is ok, should I disable eslint rule for this line?

[oliviertassinari]

https://github.com/blukai/puuffin/blob/master/package.json#L19

[oliviertassinari]

We are waiting on gatsby to release a stable version to document it: #12320. I'm putting this PR on hold. Thanks for starting it!

[mattes3]

How did you get the console logs? When I write console.log() inside gatsby-ssr.js, it does not appear on the screen.

[blukai]

@mattes3 yeah, it doesn't work in gatsby-ssr.js, I was writing console logs in getPageContext.js and withRoot.js

[mattes3]

I did this, too. But I had to change another line in the withRoot() function in withRoot.js:

Old content of the line:

this.pageContext = this.props.pageContext || getPageContext();

This is what I changed there:

this.pageContext = Object.assign(this.props.pageContext ? this.props.pageContext : {}, getPageContext());

The problem was that the page context was not null but an empty object {}. That way, a new page context including the MuiTheme was NEVER created! Material-UI had no chance to use the correct theme and JSS.

After the change, everything was rendering just fine with Gatsby V2.

[oliviertassinari]

@mattes3 It's good to know.

[HriBB]

This is my temporary solution gatsbyjs/gatsby#6127 (comment)

Note that I am using my Layout component above the page component.

[oliviertassinari]

I have updated the source code so we support both Gatsby v1 and v2.
@blukai It's a great first pull request on Material-UI 👌🏻. Thank you for giving it a shot!