如何将前端内容添加到graphQL？答案

【问题标题】：how to add frontmatter to qraphQL?如何将前端内容添加到graphQL？
【发布时间】：2020-03-07 20:44:55
【问题描述】：

我正在学习 Gatsby.js，但遇到了一个问题。我试图从 Markdown 中获取一个 html 文档，但首先我需要阅读 markdown 文档的前端。所以，我下载了 gatsby-transformer-remark，将其添加到 gatsby-config.js。但是当我打开 localhost:8000/__graphql 并尝试获取 frontmatter 时，没有这样的选项。

这是我使用的查询：

{
    allMarkdownRemark{
        nodes{
            frontmatter{
               title
            }
        }
    }
}

它在“frontmatter”一词下划线并写下“无法查询类型为“MarkdownRemark”的字段frontmatter”。我究竟做错了什么？这是它在 graphql 中的样子：image

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, 
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
        name: 'md-files',
        path: '${__dirname}/src/pages/md-files',
      },
    },
  ],
}

降价文档

---
title: "first post"
date: 2019-11-12
---

# this is a header

Lorem ipsum...

似乎 graphql 根本看不到任何降价文档。

【问题讨论】：

向我们展示你的 mardown 文档和你的 gatsby-config.js
是的，当然。 markdown doc 非常简单：` --- title: "a page" date: 2019-11-12 --- # header lorem ipsum... ' 并且在 gatsby-config.js 中刚刚添加到插件 'gatsby-transformer -评论'。当然我以前下载过。

标签： graphql gatsby

【解决方案1】：

解决了。 gatsby-config.js 源文件系统位于图像文件夹中，因此 qraphql 没有看到所有降价文件。我换了gatsby-source-filesystem。这是一个代码：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `pages`,
    path: `${__dirname}/src/pages`,
  },
},

pages 文件夹包含 md 文件
（感谢 EliteRaceElephant 的帮助）

【讨论】：

【解决方案2】：

您需要将降价文件添加为数据源。将此添加到您的gatsby-config.js：

{
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/blog`,
        name: "blog",
      },
    },

您的问题含糊不清，所以我不知道您还缺少什么。看教程：https://www.gatsbyjs.org/tutorial/part-five/#source-plugins

如果这无助于编辑您的问题。提供整个 gatsby-config.js 作为代码。也提供整个gatsby-node.js 作为代码。

【讨论】：

对不起，添加了来源。 gatsby-node.js 是空的。我应该在里面添加什么吗？我只是想在 localhost:8000/__graphql 中查看frontmatter，但没有。