Fix hot module reloading

[colebemis]

Problem

When making changes to a .md or .mdx page in a Doctocat site, this error appears:

This error occurs because gatsby-plugin-mdx should insert frontmatter in the page context of every page, and does on the first build, but when HMR kicks in the frontmatter is lost.

This is a known bug in gatsby-plugin-mdx: gatsbyjs/gatsby#21837

Possible solutions

• Solution 1: Explicitly add frontmatter to the page context in our local gatsby-node.js instead of relying on gatsby-plugin-mdx to handle frontmatter for us (This is the solution implemented in this PR)
• Solution 2: Fix gatsby-plugin-mdx so that it correctly sets the frontmatter when a page is hot reloaded.

Solution 1 (implemented)

@BinaryMuse had previously implemented this solution in #116. However, the GraphQL query that fetched the frontmatter only requested the title field. This caused frontmatter fields like status and source to be lost.

In this PR, I reimplemented @BinaryMuse's solution and added status, source, additionalContributors fields to the frontmatter GraphQL request.

Downsides

• Adding defaults to destructured variables doesn't work anymore because missing fields are null not undefined. Here's how I worked around that in this PR:

- const {additionalContributors = []} = frontmatter
+ let {additionalContributors} = frontmatter
+ if (!additionalContributors) {
+   additionalContributors = []
+ }

• Adding extra frontmatter variables won't be added to the page context unless you explicitly add them to the request in gatsby-node.js. This is not obvious and will cause frustration in the future.

Solution 2

I think this is the Right™️ solution, but I'm not sure how to implement it. I would have to a deep dive into the internals of gatsby-plugin-mdx and Gatsby itself.

Closes #146

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

doctocat – ./

🔍 Inspect: https://vercel.com/primer/doctocat/l13kbctn4
✅ Preview: https://doctocat-git-fix-hmr.primer.vercel.app

gatsby-theme-primer-example – ./

🔍 Inspect: https://vercel.com/primer/gatsby-theme-primer-example/m265ge3f8
✅ Preview: https://gatsby-theme-primer-example-git-fix-hmr.primer.vercel.app

[BinaryMuse]

👍 I think this looks good to get us going.. if we decide to fix this upstream later we can remove the hack