Gatsby 노트 5 (Contentful-1)

참고

학습 내용

Contentful을 사용하여 블로그 목록의 정보를 업데이트합니다.

Contentful

절차

절차 (새 프로젝트 만들기)

커뮤니티 선택

데이터 구조 만들기

1.Content modal => Add content type

2.Add field

데이터 생성

GraphQL로 contentful 데이터 얻기

yarn add gatsby-source-contentful

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,
      },
    },

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