How to Gatsby: The Complete Course/

...

/

Page Queries

Page Queries

Learn how to query for data in Gatsby pages using GraphQL.

We'll cover the following...

Overview

Page queries are queries used to fetch data in Gatsby page components. As we already know, page components in Gatsby are components that define web pages for the site. These components are exported from the src/pages directory or defined in the createPage action.

Writing page queries

First of all, please note that we cannot define more than one page query for the same page component. Gatsby searches for an exported query string from the page component and uses this as the query. This looks like this:

Press + to interact
export const pageQuery = graphql`
  query {
    ...someQuery
  }
`

The variable name (pageQuery, in this case) does not matter. We can name the variable anything, really, as long as it is exported from the file.

After writing and exporting the query, we can accept the result of the query in the form of a data prop in the component:

Press + to interact
const HomePage = ({ data }) => {
  return (
    // Component jsx structure
  )
}

To see this at work, let’s get back to our little Lark project and modify the index.js page to display a list of actual blog posts ...