こんにちはー！ お昼にマック 食べました.
前回の続きです.
graphQL に入る前に、いったんここでスタイルの整理をしておきたいと思います.
src フォルダ内に css フォルダを作り、main.scss header.module.scss を作成します.
main.scss は全体的なスタイル、header.module.scss は header.js 内のみ有効なスタイルを意味します.
スタイルを書いていきます !
.wrapper {
padding: 25px 20px 10px 20px ;
font-size: 20px ;
box-shadow: 0 0 4px #a1aaac ;
nav {
display: flex;
justify-content: center;
ul{
width: 100%;
max-width: 600px;
display: flex;
justify-content: space-around;
li {
&:nth-child(n+2){
padding-left: 23px;
}
}
}
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Karla,sans-serif;
}
a , li {
color:#110f11;
list-style: none;
text-decoration: none;
&:hover {
color: #656768;
}
}
.main_wrapper{
width: 100%;
padding: 30px 70px ;
}
そして、header.js、common.js にスタイルを追加します. className の追加も忘れないようにしましょう.
import React from 'react'
import { Link } from 'gatsby'
+import '../css/main.scss'
+import headerStyle from '../css/header.module.scss'
const Header = () => {
return (
> <div className={headerStyle.wrapper}>
<nav>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
<li >
<Link to='/bloglist'>BlogList</Link>
</li>
<li >
<Link to='/about'>About</Link>
</li>
</ul>
</nav>
</div>
)
}
export default Header
import React from 'react'
import Header from '../components/header'
+import '../css/main.scss'
const Layout = (props) => {
return (
<div>
<Header />
> <div className="main_wrapper">{props.children}</div>
</div>
)
}
GrapQLを使って、ブログリストを作る
本題に入りましょう !
src/pages/bloglist.js を以下のように記述します.
import React from 'react'
import { graphql , useStaticQuery } from 'gatsby'
import Layout from '../Layouts/common'
const BlogList = () => {
const data = useStaticQuery(graphql`
query {
allMarkdownRemark {
edges {
node {
frontmatter {
title
date (formatString: "MMMM DD, YYYY")
}
excerpt
}
}
}
}
`)
console.log(data)
return (
<Layout>
<h1>This is BlogList </h1>
<h2>Some contents coming soon ...</h2>
</Layout>
)
}
export default BlogList
前回 GraphQLのplaygroundで書いたクエリとほぼ同じものをここに直接、data として書きました.
本当にdataとして入っているか、console.log を記述して、実際にブラウザで確認してみましょう.
開発用サーバーを起動し ( npm run develop ) F12 キーで console を開くと、
{allMarkdownRemark: {…}} オブジェクトが見えます.
横の三角ボタンを押して詳しく見ていくと、どうやら、edges に長さ 6 の配列があることが分かります.
この一つ一つに記事のデータが入っているわけです. さらに深く見ていくと、最終的に title date excerpt というデータが見つかります.
よって、data という値を利用して、ブログリストを書いていくことになります.
もちろん、一つ一つリストを書いていくのではなく、map というメソッドを使って、一気に記述させます !
やってみましょう.
bloglist.js
bloglist.js は最終的にこんな感じになります.
import React from 'react'
import { graphql , useStaticQuery } from 'gatsby'
import Layout from '../Layouts/common'
const BlogList = () => {
const data = useStaticQuery(graphql`
query {
allMarkdownRemark {
edges {
node {
frontmatter {
title
date (formatString: "MMMM DD, YYYY")
}
excerpt
}
}
}
}
`)
console.log(data)
return (
<Layout>
<h1>This is BlogList </h1>
<ol>
{data.allMarkdownRemark.edges.map( ({node}) => {
return (
<li>
<h2>{node.frontmatter.title}</h2>
<p>{node.frontmatter.date}</p>
</li>
)
})}
</ol>
</Layout>
)
}
export default BlogList
保存すると、すぐにずらーっと記事ごとに、タイトル、日付が表示されます.
これで、ブログリストを表示するということができました !
しかし、ここで重要なことがあります. それはブラウザの F12 キーを押して、console を見てみると、以下のような警告が出ていることが分かります.
Warning: Each child in a list should have a unique "key" prop.
map メソッドを利用するときは、それぞれの記事ごとに ユニーク な キー を付ける必要があります.
やってみましょう.
<li key={node.frontmatter.title}>
<h2>{node.frontmatter.title}</h2>
<p>{node.frontmatter.date}</p>
</li>
これで、警告を消すことができました!
次回予告
今回作った、ブログリストページから、実際に個々の記事のリンクを通して、記事ページに移動するための、設定、ページの作成を行いたいと思います.
ここまで読んでくださってありがとうございました.