title: Graphql query in Gatsby static query component with markdown file
body: <p>I have been trying to wrap my head around this question for a while and couldn't sort it out.</p>
  
  <p>To sum things up, I'm trying to make a Gatsby site with netlify CMS. The purpose of the CMS will not be to create or delete pages but to be able to edit the content of different static pages (ie: about, home, etc...)</p>
  
  <p>In my Gatsby project I basically have my netlify CMS hooked up and the file structure I'm trying to achieve is roughly as follow:</p>
  
  <pre><code>myproject/
      |---src/
          |---CMS
              |---about.md
              |---index.md
          |---pages
              |---about.js
              |---index.js
  </code></pre>
  
  <p>The markdown files can be edited from the CMS and I would like to use this data in my pages component. I setup gatsby-markdown-remark and gatsby-source-filesystem with npm install and the corresponding gatsby-config.js plugins declaration.</p>
  
  <p>These markdown will look like the following:</p>
  
  <pre><code>---
  title: "About Page"
  intro: "This is all about is"
  ---
  We are doing this because we love it and we are good at it.
  </code></pre>
  
  <p>I would like to be able to pull this data with a static query to use in the page component but can't figure how to target one.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> import React from "react"
      import { StaticQuery, graphql } from 'gatsby'
  
      const IndexPage = () =&gt; (
        &lt;StaticQuery
        query = { graphql`
          query IndexPageQuery {
            mardownRemark(frontmatter: {title: {eq:"About Page"}}) {
    frontmatter {
      title
      intro
    }
  }      
          
        `} 
  
        render={data =&gt; (
          &lt;h1&gt;{data.markdownRemark.frontmatter.title&lt;/h1&gt;
          &lt;h2&gt;{data.markdownRemark.frontmatter.intro}&lt;/h2&gt;
        )}
        /&gt; 
      )
  
      export default IndexPage
  
  
    </code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to minimize the amount of code as I really think my issue is coming from the graphql query but sorry if it makes it confusing. I am as well confuse.</p>
  
  <p>Any help leading to the right direction will be really appreciated. May be the approach is not how it is supposed to work.</p>
  
  <p>Thank you.</p>