ことばを学ぶ LEARN GATSBY 週間 #3日目

こんにちはー！　お昼にマック 食べました.

前回の続きです.

graphQL に入る前に、いったんここでスタイルの整理をしておきたいと思います.
src フォルダ内に css フォルダを作り、main.scss header.module.scss を作成します.
main.scss は全体的なスタイル、header.module.scss は header.js 内のみ有効なスタイルを意味します.

スタイルを書いていきます !

header.module.scss

.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;
                }
            }
        }
    }
}

main.scss

* {
    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 の追加も忘れないようにしましょう.

header.js

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

common.js

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 を以下のように記述します.

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 は最終的にこんな感じになります.

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 メソッドを利用するときは、それぞれの記事ごとに ユニーク な キー を付ける必要があります.
やってみましょう.

bloglist.js

                     <li key={node.frontmatter.title}>
                        <h2>{node.frontmatter.title}</h2>
                        <p>{node.frontmatter.date}</p>
                     </li>

これで、警告を消すことができました!

#次回予告
今回作った、ブログリストページから、実際に個々の記事のリンクを通して、記事ページに移動するための、設定、ページの作成を行いたいと思います.

ここまで読んでくださってありがとうございました.