CODEWITHSUNDEEP
reactjsgraphqlmarkdowngatsbynetlify-cms
Max
Max

Reputation: 63

Graphql query in Gatsby static query component with markdown file

I have been trying to wrap my head around this question for a while and couldn't sort it out.

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...)

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:

myproject/
    |---src/
        |---CMS
            |---about.md
            |---index.md
        |---pages
            |---about.js
            |---index.js

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.

These markdown will look like the following:

---
title: "About Page"
intro: "This is all about is"
---
We are doing this because we love it and we are good at it.

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.

 import React from "react"
    import { StaticQuery, graphql } from 'gatsby'

    const IndexPage = () => (
      <StaticQuery
      query = { graphql`
        query IndexPageQuery {
          mardownRemark(frontmatter: {title: {eq:"About Page"}}) {
  frontmatter {
    title
    intro
  }
}      
        
      `} 

      render={data => (
        <h1>{data.markdownRemark.frontmatter.title</h1>
        <h2>{data.markdownRemark.frontmatter.intro}</h2>
      )}
      /> 
    )

    export default IndexPage

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.

Any help leading to the right direction will be really appreciated. May be the approach is not how it is supposed to work.

Thank you.

Upvotes: 0

Views: 1342

Answers (1)

Derek Nguyen
Derek Nguyen

Reputation: 11577

Make sure in your gatsby-config, you have set up gatsby-source-filesystem like this (it can be a new entry -- you can have multiple gatsby-source-filesystem)

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/CMS`, <-- your CMS folder
    name: `pages`, <-- will be your `sourceInstanceName` when you query `allFile`
  },
},

Your query looks fine. Note that StaticQuery is useful when you need to get some data from a component, but in a page component, you can use normal query:

import React from 'react'
import { graphql } from 'gatsby'

export default class Index extends React.Components {
  ...
}

export const pageQuery = graphql`
  query {
    markdownRemark(frontmatter: {
      title: {
        eq: "New Beginnings"
      }
    }) {
      id
      frontmatter {
        title
      }
    }
  }
`

Let me know if that doesn't help!

Upvotes: 2

Related Questions