Custom frontmatter variables with Markdown Remark in Gatsby.js

Solved!

The problem was that the newly-added properties in the frontmatter of my markdown file didn't show up in my GraphQL.

All I had to do was to restart the server with 'gatsby-develop'.

Some background information that might help you anticipate similar issues in the future

gatsby-transformer-remark and all other plugins that are dependant on GraphQL queries can only read newly added variables when the GraphQL queries are run.

In Gatsby, GraphQL queries are run ONCE at startup of your development server. The queries will not be refreshed if you alter the code while gatsby develop is still live. You can run your GraphQL queries again by restarting with gatsby develop.

The Gatsby documentation has its own entry of the Gatsby Build Process that shows when exactly the queries are run:

success open and validate gatsby-configs - 0.051 s
// ...
success onPostBootstrap - 0.130 s
⠀
info bootstrap finished - 3.674 s
⠀
success run static queries - 0.057 s — 3/3 89.08 queries/second  // GraphQL queries here
success run page queries - 0.033 s — 5/5 347.81 queries/second   // GraphQL queries here
success start webpack server - 1.707 s — 1/1 6.06 pages/second

As a rule of thumb that I learned from experience, if you are wondering why your code changes are not hot reloading

• refresh the browser.
• If that doesn't work, restart gatsby develop.
• If that doesn't work, run gatsby clean, clear your browser's site cache, and run gatsby develop.
• If that doesn't work you can be almost 100% certain you made a mistake.