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?

Vermiculate

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

Vermiculate

Can you explain more? I can't figure this out! – Retardment

Just restart Gatsby to let the 'gatsby-transformer-remark' know that you have done changes to the frontmatter :) – Vermiculate

I'm truly impressed you didn't need to restart gatsby for days. I literally restart it every 5 minutes because of errors – Gerhard

If you using GraphiQL might need to reload browser too. – Tiffanietiffanle

@RobertWolf thanks a lot, I also had the same question and I wasn't finding nothing in the documentation, but restart the service and reload the page of GraphiQL is all the needed. Thanks! – Gabriella

Also found that the directory with the markdown files has to be read by gatsby-source-filesystem, otherwise gatsby-transformer-remark will not work with that information { resolve: gatsby-source-filesystem, options: { path: ${__dirname}/content/mycollection, name: mycollection, }, }, – Gabriella

Don't you also have to add this data to the definitions in gatsby-node exports.createPages ? for an initial page list setup? – Wavy

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.

Hey