在类组件中使用gatsby中的GraphQL

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

class MyComponent extends React.Component {
  render() {
    return (
      <StaticQuery
        query={graphql`
          query {
            allMarkdownRemark {
              edges {
                node {
                  frontmatter {
                    title
                  }
                }
              }
            }
          }
        `}
        render={data => (
          <div>
            {data.allMarkdownRemark.edges.map(({ node }) => (
              <div key={node.frontmatter.title}>{node.frontmatter.title}</div>
            ))}
          </div>
        )}
      />
    )
  }
}

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const MyComponent = () => {
  const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              title
            }
          }
        }
      }
    }
  `)

  return (
    <div>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <div key={node.frontmatter.title}>{node.frontmatter.title}</div>
      ))}
    </div>
  )
}