How do I use GraphQL queries in Gatsby?

How do I use GraphQL queries in Gatsby?

In Gatsby, you can use GraphQL to query data from your sources. You define your queries in your components using the StaticQuery or useStaticQuery hooks.

Can you show me an example of a GraphQL query in a Gatsby component?

Sure! Here's a simple example:

import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';

const MyComponent = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  return <h1>{data.site.siteMetadata.title}</h1>;
};

export default MyComponent;

What if I want to fetch data from a Markdown file?

You can query Markdown files by using the allMarkdownRemark query. Here's an example:

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