Gatsbyノート2(Markdown/GraphQL Playground)

## 参考
https://bit.ly/2Fq3GcO

## 学習内容

- 1.Markdownを利用する準備

- 2.GraphQL Playgroundの導入

- 3.Markdownをデータとして利用する

## 1.Markdownを利用する準備

### プラグインのインストール(3つ)

####⑴ gatsby-transformer-remark
https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/?=remark

```
yarn add gatsby-transformer-remark
```

#### ⑵ gatsby-remark-images
https://www.gatsbyjs.com/plugins/gatsby-remark-images/?=remark

```
yarn add gatsby-remark-images gatsby-plugin-sharp
```
#### ⑶ gatsby-remark-relative-images
https://www.gatsbyjs.com/plugins/gatsby-remark-relative-images/?=remark%20re

```
yarn add gatsby-remark-relative-images
```

### gatsby.config.jsに追記(プラグイン3つ分)

+ gatsby-source-filesystemのoptionに取得するデータを追記する

```gatsby.config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-sass`,
    `gatsby-plugin-react-helmet`, //gatsby-starter-defaultでは既に設定されている
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
//追記 /postのmdファイルを扱う為追記
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
// 追加 gatsby-transformer-remark
// https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/?=remark
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        // CommonMark mode (default: true)
        commonmark: true,
        // Footnotes mode (default: true)
        footnotes: true,
        // Pedantic mode (default: true)
        pedantic: true,
        // GitHub Flavored Markdown mode (default: true)
        gfm: true,
        // Plugins configs
        plugins: [],
      },
    },
// 追加 gatsby-remark-images
// https://www.gatsbyjs.com/plugins/gatsby-remark-images/?=remark
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 590,
            },
          },
        ],
      },
    },
// 追加 gatsby-remark-relative-images
// https://www.gatsbyjs.com/plugins/gatsby-remark-relative-images/?=remark%20re
    // Add static assets before markdown files
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/images`,
        name: 'images',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          // gatsby-remark-relative-images must
          // go before gatsby-remark-images
          {
            resolve: `gatsby-remark-relative-images`,
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 590,
            },
          },
        ],
      },
    },
  ],
}
```

# 2.GraphQL Playgroundの導入

https://www.gatsbyjs.com/docs/using-graphql-playground/

```package.json
    "develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop"
```

> 開発サーバーがhttp：// localhost：8000 / ___ graphqlで実行されているときに、gatsby developではなくnpm run developを使用してアクセスする

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/b91b55fc-11b6-cccb-b994-67e079ace5c1.png" width="500">

## 3.Markdownをデータとして利用する

- データを用意する
- クエリーを書き、取得できるデータを確認する
- クエリーをコード側へコピーする

```src/posts/blog-001.md

---
title: "タイトル　001"
date: "2020-04-04"
thumbnail: "../images/image_001.jpg"
---

Gatsbyブログ作成チュートリアル001
![Sample](../images/image_001.jpg)
## topic

1. list1
2. list2
3. list3
```

- gatsby-source-filesystemのoptionで指定したpathのデータを取得できる
- allMarkdownRemark > edges > node > frontmatter
    - title
    - date
    - thumbnail


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/cc59ab52-d060-73c7-51f8-8692d25e0a6d.png" width=50%>


```index.js

import { graphql, useStaticQuery } from "gatsby" //追加

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              date
              title
              thumbnail {
                childImageSharp{
                  fluid {
                    src
                  }
                }
              }
            }
          }
        }
      }
    }
  `)
  return (
    <Layout>
      <Kv/>
      <Container>
        <Row>
          {
            data.allMarkdownRemark.edges.map((edge, index) => (
              <Col sm={4} key={index}>
                <BlogItem 
                  title={edge.node.frontmatter.title}
                  date={edge.node.frontmatter.date}
                  src={edge.node.frontmatter.thumbnail.childImageSharp.fluid.src}
                  />
              </Col>
            ))
          }
        </Row>
      </Container>
    </Layout>
  )
}

export default IndexPage
```