Gatsby StaticQuery Errors

notWorkingWithStaticQuery.js

// src/pages/index.js

import React from 'react'
import {StaticQuery, graphql} from 'gatsby'
import Layout from '../components/layout'

// const HomePage = ({data}) => {
//   return (
//     <Layout>
//       {data.site.siteMetadata.description}
//     </Layout>
//   )
// } 

const HomePage = () => {
  return (
    <StaticQuery
      query={graphql`
        query HomePageQuery {
          site {
            siteMetadata {
              title
              description
            }
          }
        }
      `}

      render={data => <div>{JSON.stringify(data)}</div>}
    />
  )
}

// export const query = graphql`
//   query HomepageQuery {
//     allMarkdownRemark(
//         sort: {order: DESC, fields: [frontmatter___date]}
//     ) {
//       edges {
//         node {
//           html
//           id
//           frontmatter {
//             date
//             path
//             title
//           }
//         }
//       }
//     }
    
//     site {
//       siteMetadata {
//         title
//         description
//       }
//     }
//   }
// `

export default HomePage

worksWithPageQuery.js

// src/pages/index.js

import React from 'react'
import {StaticQuery, graphql} from 'gatsby'
import Layout from '../components/layout'

const HomePage = ({data}) => {
  return (
    <Layout>
      {data.site.siteMetadata.description}
    </Layout>
  )
} 

// const HomePage = () => {
//   return (
//     <StaticQuery
//       query={graphql`
//         query HomePageQuery {
//           site {
//             siteMetadata {
//               title
//               description
//             }
//           }
//         }
//       `}

//       render={data => <div>{JSON.stringify(data)}</div>}
//     />
//   )
// }

export const query = graphql`
  query HomepageQuery {
    allMarkdownRemark(
        sort: {order: DESC, fields: [frontmatter___date]}
    ) {
      edges {
        node {
          html
          id
          frontmatter {
            date
            path
            title
          }
        }
      }
    }
    
    site {
      siteMetadata {
        title
        description
      }
    }
  }
`

export default HomePage