使用Gatsby.js中的Markdown Remark自定义frontmatter变量

时间:2018-01-18 20:08:34

标签: markdown graphql gatsby yaml-front-matter remarkjs

我正在使用Gatsbyjs和NetlifyCMS构建一个网站。我已经开始使用此启动器https://github.com/AustinGreen/gatsby-starter-netlify-cms了,我现在正尝试自定义它。

我想在markdown文件的frontmatter中使用自定义变量,如下所示:

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

我想用GraphQL访问这些数据。我使用gatsby-source-filesystem和gatsby-transform-remark。这是我的问题:

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

我无法让GraphQL读取我自己的变量,它只能识别titletemplateKey(那些已经在启动器中使用过的变量)。我收到这个错误:

{
  "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
        }
      ]
    }
  ]
}

我已经搜索了几天,但什么也没找到。有人会帮我吗?

2 个答案:

答案 0 :(得分:21)

解决!

问题是我的markdown文件的前端中新添加的属性没有显示在我的GraphQL中。

我所要做的就是用'gatsby-develop'重新启动服务器。

答案 1 :(得分:2)

一些背景信息可能会帮助您将来预测类似的问题

gatsby-transformer-remark和所有其他依赖GraphQL查询的插件只能在运行GraphQL查询时读取新添加的变量。

在Gatsby中,在开发服务器启动时一次运行GraphQL查询。 如果您在gatsby develop仍处于活动状态时更改代码,则不会刷新查询。您可以通过使用gatsby develop重新启动来再次运行GraphQL查询。

Gatsby文档有自己的Gatsby Build Process条目,该条目显示了确切的查询运行时间:

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

根据我的经验,如果您想知道为什么代码更改没有被热重装

  • 刷新浏览器。
  • 如果这不起作用,请重新启动gatsby develop
  • 如果这不起作用,请运行gatsby clean,清除浏览器的网站缓存,然后运行gatsby develop
  • 如果这不起作用,您可以几乎 100%确定您犯了一个错误。