Gatsby.js — Queries

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Page Query

We can query the site’s data and display it on our page.

To do this, we write:

gatsby-config.js

module.exports = {
  plugins: [],
  siteMetadata: {
    title: `Gatsby`,
    siteUrl: `https://www.gatsbyjs.com`,
    description: `Blazing fast modern site generator for React`,
  },
}

src/pages/index.js

import React from "react"
import { graphql } from "gatsby"

export const query = graphql`
  query HomePageQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`

export default function Home({ data }) {
  return <div>{data.site.siteMetadata.title}</div>
}

We set the site’s metadata in gatsby-config.js .

Then we can get the data with the graphql tag in our page.

Then in the page component, we get the data from the data prop.

Querying Data with the StaticQuery Component

We can also query data with the StaticQuery component.

This is useful for getting data on non-page components.

For example, we can write:

gatsby-config.js

module.exports = {
  plugins: [],
  siteMetadata: {
    title: `Gatsby`,
    siteUrl: `https://www.gatsbyjs.com`,
    description: `Blazing fast modern site generator for React`,
  },
}

src/pages/index.js

import React from "react"
import { StaticQuery, graphql } from "gatsby"

const NonPageComponent = () => (
  <StaticQuery
    query={graphql`
      query NonPageQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={(
      data
    ) => (
        <h1>
          {data.site.siteMetadata.title}
        </h1>
      )}
  />
)

export default function Home() {
  return <div>
    <NonPageComponent />
  </div>
}

We created the NonPageComponent to get the title from the site’s metadata.

We use the StaticQuery component to get the data.

Then in the render prop, we have a function that renders the title in the way we want.

Querying Data with the useStaticQuery Hook

Another way to query data is to use the useStaticQuery hook.

To do this, we write:

gatsby-config.js

module.exports = {
  plugins: [],
  siteMetadata: {
    title: `Gatsby`,
    siteUrl: `https://www.gatsbyjs.com`,
    description: `Blazing fast modern site generator for React`,
  },
}

src/pages/index.js

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const NonPageComponent = () => {
  const data = useStaticQuery(graphql`
    query NonPageQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
  return (
    <h1>
      {data.site.siteMetadata.title}
    </h1>
  )
}

export default function Home() {
  return <div>
    <NonPageComponent />
  </div>
}

We call the useStaticQuery hook with our GraphQL query object, which is created from the graphql tag.

It returns the data and we can render it.

Limiting with GraphQL

We can limit the number of results returned with the GraphQL API/

To do this, we can run the following query:

{
  allSitePage(limit: 3) {
    edges {
      node {
        id
        path
      }
    }
  }
}

in http://localhost:8000/__graphql, then the results are limited to 3 entries.

Also, we can add sorting by running:

{
  allSitePage(sort: {fields: path, order: ASC}) {
    edges {
      node {
        id
        path
      }
    }
  }
}

Now we sort the path field in the response in ascending order.

Conclusion

We can query our site metadata and configure queries in various ways with Gatsby.