Gatsby
Up and Running with Gatsby: Working with Data

Page Queries

PRO

Now that we know about static queries, let's learn about 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.