Gatsby.js - Framework to build blogs and server-side rendering pages fast

🍱Framework

javascript

react

GraphQL in Gatsby

Files in the pages folder can run a GraphQL query. Its results will be available as a data prop in the React component in the same file:

import React from "react"
import { graphql } from "gatsby"
export default function Page({ data }) {
  return (
    <div>
      <h1>About {data.site.siteMetadata.title}</h1>
      <p>We're a very cool website you should return to often.</p>
    </div>
  )
}
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

To run GraphQL queries in non-page components you’ll need to use Gatsby’s <StaticQuery /> component.

Discuss on Twitter ● Improve this article: Edit on GitHub

GraphQL in Gatsby

Discussion