25

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?

Robert Wolf
  • 1,312
  • 13
  • 18

2 Answers2

42

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

Robert Wolf
  • 1,312
  • 13
  • 18
  • 1
    Can you explain more? I can't figure this out! – hamishtaplin Jan 28 '18 at 20:15
  • 3
    Just restart Gatsby to let the 'gatsby-transformer-remark' know that you have done changes to the frontmatter :) – Robert Wolf Jan 29 '18 at 10:58
  • 5
    I'm truly impressed you didn't need to restart gatsby for days. I literally restart it every 5 minutes because of errors – Z. Zlatev Oct 06 '18 at 16:55
  • If you using GraphiQL might need to reload browser too. – Tomotsugu Kaneko Nov 15 '18 at 12:34
  • @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! – Alfchee Sep 12 '19 at 16:59
  • 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`, }, }, – Alfchee Sep 12 '19 at 17:05
  • Don't you also have to add this data to the definitions in gatsby-node `exports.createPages` ? for an initial page list setup? – dcsan Sep 16 '19 at 23:47
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.
EliteRaceElephant
  • 7,744
  • 4
  • 47
  • 62