Search code examples
markdowngraphqlgatsbyyaml-front-matterremarkjs

Custom frontmatter variables with Markdown Remark in Gatsby.js


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?


Solution

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