Gatsbyでサイドバーに最近の投稿を表示する

やりたいこと

componentsディレクトリ内は下記のようになっている

• components
  • Layout
  • Sidebar
  • BlogCard

Layoutにはサイドバーが組み込まれています

components/Layout

const Layout = ({ children }) => {
  return (
    <div>
      <Header />
      <section style={{ marginTop: "9rem" }}>
        <Container>
          <div className="row">
            <div className="col-lg-8">{children}</div>
            <div className="col-lg-4">
              <Sidebar />
            </div>
          </div>
        </Container>
      </section>
      <Footer />
    </div>
  )
}

index.js

<Layout>
      {posts.map(({ node }) => {
        return (
          <BlogCard
            key={node.id}
            title={title}
            readMore={node.slug}
          />
        )
      })}
</Layout>

indexから記事を指定数切り出して渡す事もできますが
引数やら責務範囲やらややこしいのでやりたくなかった

やりかた

useStaticQueryを使う

公式の通りインポート

import { useStaticQuery, graphql } from "gatsby"

あとは、 const data = useStaticQuery(graphql``)として、普通にGraphQLを書いていく
最近の投稿なので、日付でソートして、指定数取得するようにします

サイドバーは下記の様になった

components/Sidebar.js

import React from "react"
import { Container, Row1 Nav } from "react-bootstrap"
import { useStaticQuery, Link, graphql } from "gatsby"

import Styles from "./sidebar.module.css"

const Sidebar = () => {
  const data = useStaticQuery(graphql`
    query {
      allContentfulBlogPost(
        sort: { fields: [publishDate], order: DESC }
        limit: 5
      ) {
        edges {
          node {
            id
            slug
            title
            publishedDateJP: publishDate(formatString: "Y年MM月DD日")
          }
        }
      }
    }
  `)

  const posts = data.allContentfulBlogPost.edges
  return (
    <div className={Styles.sidebar}>
      <Row>
        <div className="col-lg-12">
          <div className={Styles.sidebar_item + " " + Styles.recent_posts}>
            <div className={Styles.sidebar_heading}>
              <h2>Recent Posts</h2>
            </div>
            <div className="content">
              <Nav>
                {posts.map(({ node }) => (
                  <Nav.Link as={Link} to={`post/${node.slug}`}>
                    <h5 className={Styles.head}>{node.title}</h5>
                    <span className={Styles.date}>{node.publishedDateJP}</span>
                  </Nav.Link>
                ))}
              </Nav>
            </div>
          </div>
        </div>
      </Row>
    </div>
  )
}

export default Sidebar