Custom frontmatter variables with Markdown Remark in Gatsby.js

Question

I am building a website using Gatsbyjs and NetlifyCMS. I've started using this starter https://github.com/AustinGreen/gatsby-starter-netlify-cms, and I am trying to customise it now.

I want to use custom variables in the frontmatter of a markdown file like this:

---
templateKey: mirror
nazev: Černobílá
title: Black and White
cena: '2700'
price: '108'
thumbnail: /img/img_1659.jpeg
---

I want to acess this data with GraphQL. I use gatsby-source-filesystem and gatsby-transform-remark. This is my query:

  {
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          templateKey
          nazev
          title
          cena
          price
        }
      }
    }
  }
}

I can't get the GraphQL to read my own variables, it recognises only title and templateKey (those, that were already used in the starter). I get this error:

{
  "errors": [
    {
      "message": "Cannot query field \"nazev\" on type \"frontmatter_2\".",
      "locations": [
        {
          "line": 7,
          "column": 11
        }
      ]
    },
    {
      "message": "Cannot query field \"cena\" on type \"frontmatter_2\".",
      "locations": [
        {
          "line": 9,
          "column": 11
        }
      ]
    },
    {
      "message": "Cannot query field \"price\" on type \"frontmatter_2\". Did you mean \"pricing\"?",
      "locations": [
        {
          "line": 10,
          "column": 11
        }
      ]
    }
  ]
}

I've searched for days, but found nothing. Would someone help me please?

Answer 1

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'.

Answer 2

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.