Gatsbyノート5 (Contentful-1)

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

## 学習内容

- Contentfulを使ってブログ一覧の情報を更新する


## Contentful
https://www.contentful.com/get-started/

![スクリーンショット 2020-09-12 10.07.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/6675dbf1-5c65-45c0-b848-c7bdb8e99113.png)

## 手順

- Try for free を押す
- Sign up

![screencapture-app-contentful-2020-09-12-10_13_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/d91890cc-c1df-ed31-51bb-3a2046f87088.png)

- 左の I create content を選択
- Get started を押す

The example projectが作成される(ここでは使わない)

## 手順(新規プロジェクトの作成)

- 左上のメニューから、「+Create space」を押す

![スクリーンショット 2020-09-12 10.30.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/02d2ba50-1f0d-c042-b8cc-6b590b148ccd.png)

- communityを選択
![スクリーンショット 2020-09-12 10.40.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/9916cffa-93b8-e898-70a9-52a7466c3691.png)


## データ構造を作成する

#### 1.Content modal => Add content type

![スクリーンショット 2020-09-12 10.45.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/ebb2501a-59f0-0946-e91b-c576d06f0f8a.png)

- Api Identifierとは、Apiでデータを取得する時の識別子


#### 2.Add field

![スクリーンショット 2020-09-12 10.48.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/8a8ef052-2db4-1810-3c97-43b071da4326.png)


## データ作成

![スクリーンショット 2020-09-12 10.59.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/c2d8cf37-30cc-a8bf-c8e1-6b1f2c9e38fe.png)

Field IDはGraphQLでデータ取得する際に利用する

- Title
    - Text
- Slug
    - Text
- created date
    - Date and time
- Thumbnail
    - Media
    - One fileを選択
- body
    - Rich text

![スクリーンショット 2020-09-12 11.12.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/a71114e8-a088-526e-7cc8-c2c5bf7b6e1e.png)

- Saveを押す

- ヘッダーメニューからContentを選択 => Add Blog Postを押す
- 管理画面が出来ているので、投稿を入力する

![screencapture-app-contentful-spaces-6kc85xg7zxrz-entries-kYsyrqW5PwTlUbb9FYdYU-2020-09-12-11_14_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/c7d87b4a-9d39-c51c-5ae1-d00a1d9bbff4.png)

- 3件のブログ記事の入力を行った

![スクリーンショット 2020-09-12 11.28.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/08c56f23-fbe2-3441-1620-89f6b59c7f18.png)

## GraphQLでcontentfulのデータを取得する

- gatsby-source-contentful

https://www.gatsbyjs.com/plugins/gatsby-source-contentful/?=Gatsby%20soure%20contes

```
yarn add gatsby-source-contentful
```

- gatsby-config.jsにプラグインの設定を追記
- Contentful
    - Settings => API keys
        - spaceId
        - accessToken
    - .envファイルにapaceIdとaccessTokenを記述し、gatsby-config.jsで使う

```gatsby-config.js

const dotenv = require("dotenv")

if (process.env.ENVIRONMENT !== "production") {
  dotenv.config()
}

:
:
//(省略)

    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
```

- GraphQL Playgroundでデータ取得を試す

![スクリーンショット 2020-09-12 12.07.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62264/94659a45-d6c4-09ed-9f99-2edeb3bdde4c.png)

```src/pages/index.js

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import Layout from "../components/layout"
import Kv from "../components/kv"
import BlogItem from "../components/blogItem"
import {Container, Row, Col} from 'react-bootstrap'

const IndexPage = () => {
  // contentfulからデータを取得
  const data = useStaticQuery(graphql`
    query {
      allContentfulBlogPost(sort: {
        fields: createdDate,
        order: ASC
      }) {
        edges {
          node {
            title
            slug
            createdDate(formatString: "YYYY/MM/DD")
            thumbnail {
              fluid {
                src
              }
            }
          }
        } 
      }
    }  
  `)
  return (
    <Layout>
      <Kv />
      <Container>
        <Row>
          {
            data.allContentfulBlogPost.edges.map((edge, index) => (
              <Col sm={4} key={index}>
                <BlogItem
                  title={edge.node.title}
                  date={edge.node.createDate}
                  src={edge.node.thumbnail.fluid.src}
                  link={`blog/${edge.node.slug}`} />
              </Col>
            ))
          }
        </Row>
      </Container>
    </Layout>
  )
}

export default IndexPage
```