How to do multiple StaticQuery in Gatsby

If you need to do more than one GraphQL StaticQuery in Gatbsy you can assign each query to a name.

Then simply access data.yourName and you're ready to go.

Here's a full example of how I use it on my reviews site:

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

const TotalTime = () => (
  <StaticQuery
    query={graphql`
      {
        movies: allMarkdownRemark(filter: { frontmatter: { type: { eq: "movie" } } }) {
          edges {
            node {
              id
            }
          }
        }
        series: allMarkdownRemark(filter: { frontmatter: { type: { eq: "series" } } }) {
          edges {
            node {
              id
            }
          }
        }
      }
    `}
    render={data => {
      let movies = JSON.parse(JSON.stringify(data.movies, null, 4)).edges;
      let series = JSON.parse(JSON.stringify(data.series, null, 4)).edges;

      return <div>
          Do something...
        </div>
    }}
  ></StaticQuery>
)

export default TotalTime
Code language: JavaScript (javascript)

Leave a Reply

Your email address will not be published. Required fields are marked *