Page Queries

In the last video, we learned about static queries and the useStaticQuery hook. Let's use a page query to pull in some of our siteMetadata in about.js.

We need to import graphql first:

import { graphql } from "gatsby"

At the bottom of the file, we'll add the following constant, which is a page query:

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
        description
        author
      }
    }
  }
`

Now we can use the data in our component like this:

export default ({ data }) => (
  <Layout noHeader>
    <h1>About {data.site.siteMetadata.title}</h1>
    <NavBar />
    <p>{data.site.siteMetadata.description}</p>
    <p>Made with love by {data.site.siteMetadata.author}.</p>
  </Layout>
)

We're destructuring data from the props and then using the data in the same structure as the query. I've removed the buttons we added during the styling tutorial to make it easier to read.

When you run the server with gatsby develop, you should see our title, description, and author on the /about page!

Let's practice static and page queries in the next video.

Helpful Links

• Gatsby docs: Querying data in pages with GraphQL