how to add frontmatter to qraphQL?

Question

i`m learning Gatsby.js and faced with a problem. i tried to get an html document from markdown, but firstly i needed to read the frontmatter of the markdown document. so, i downloaded gatsby-transformer-remark, added it to gatsby-config.js. but when i open localhost:8000/__graphql and try to get the frontmatter, there is no such option.

this is a query i used:

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

it underlines the word "frontmatter" and writes 'cannot query field frontmatter on type "MarkdownRemark"'. what am i doing wrong? this is how it looks in 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',
      },
    },
  ],
}

markdown document

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

# this is a header

Lorem ipsum...

it seems like graphql doesn`t see any markdown doc at all.

Answer 1

solved it. in gatsby-config.js sourse filesystem was in image folder, so qraphql didn't see all markdown files. i changed in gatsby-source-filesystem. this is a code:

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

pages folder contains md-files
(thanks EliteRaceElephant for help)

Answer 2

You need to add your markdown files as a datasource. Add this to your gatsby-config.js:

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

Your question is vague so I don't know exactly what else you are missing. Take a look at the tutorial: https://www.gatsbyjs.org/tutorial/part-five/#source-plugins

If this does not help edit your question. Provide the whole gatsby-config.js as code. Provide the whole gatsby-node.js as code as well.