Gatsby １つのページで複数のクエリを実行する方法

１つのページでお知らせやブログなど複数のコンテンツを表示したい場合はクエリを複数作成することができる。

サイドバー用のカテゴリ一覧など複数ページで共通のデータを使う場合はstaticQueryを使ってコンポーネントごとにクエリを実行する。

複数クエリを１つのページで実行する

複数クエリの実行は頭に名前をつけるだけ。名前は自由。

post: allMarkdownRemark(){}

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

const MultipleQuery = ({ data }) => {
  const post = data.post
  const portfolio = data.portfolio
  const siteTitle = data.siteMetaData.siteMetadata.title

  console.log(data)

  return (
    <h1>test</h1>
  )
}

export default MultipleQuery

export const query = graphql`
  query {
    post: allMarkdownRemark(
      limit: 3
      sort: { order: DESC, fields: [frontmatter___date] }
      filter: { frontmatter: { type: { eq: "blog" } } }
    ) {
      edges {
        node {
          frontmatter {
            title
            path
          }
        }
      }
    }
    portfolio: allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date] }
      filter: { frontmatter: { type: { eq: "portfolio" } } }
    ) {
      edges {
        node {
          frontmatter {
            title
            path
          }
        }
      }
    }
    siteMetaData: site {
      siteMetadata {
        title
      }
    }
  }
`;