Gatsby.js 中带有 Markdown 备注的自定义 frontmatter 变量

Question

我正在使用 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 读取我自己的变量，它只能识别 title 和 templateKey（那些已经在启动器中使用过的变量）。我收到此错误：

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

我已经搜索了几天，但一无所获。有人可以帮助我吗？

Answer 1

已解决！

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

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

Answer 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% 确定您犯了一个错误。

Gatsby.js 中带有 Markdown 备注的自定义 frontmatter 变量

Custom frontmatter variables with Markdown Remark in Gatsby.js

markdown

yaml-front-matter

graphql

gatsby

remarkjs

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