如何在qraphQL中添加frontmatter?

时间:2019-11-12 07:07:20

标签: graphql gatsby

我正在学习Gatsby.js并遇到问题。我试图从markdown获取一个html文档,但是首先我需要阅读markdown文档的前题。因此,我下载了gatsby-transformer-remark,并将其添加到gatsby-config.js。但是当我打开localhost:8000 / __ graphql并尝试获取最新信息时,没有这样的选择。

这是我使用的查询:

{
    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似乎根本看不到任何降价文档。

2 个答案:

答案 0 :(得分:0)

您需要将markdown文件添加为数据源。将此添加到您的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作为代码。

答案 1 :(得分:0)

解决了。 gatsby-config.js中的sourse文件系统位于image文件夹中,因此qraphql没有看到所有的markdown文件。我在gatsby-source-filesystem中进行了更改。这是一个代码:

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

pages文件夹包含md文件
(感谢EliteRaceElephant的帮助)