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)