Gatsby 노트 5 (Contentful-1)

참고

학습 내용

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

Contentful

절차

Try for free를 누르십시오

Sign up

왼쪽 I create content 선택

Get started 를 누릅니다

The example project가 생성된다 (여기서는 사용하지 않는다)

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

왼쪽 상단 메뉴에서 "+Create space"를 누릅니다

커뮤니티 선택

데이터 구조 만들기

1.Content modal => Add content type

Api Identifier란, Api로 데이터를 취득할 때의 식별자

2.Add field

데이터 생성

Field ID는 GraphQL로 데이터 취득시에 이용한다

Title

Text

Slug

Text

created date

Date and time

Thumbnail

Media

One file 선택

body

리치 텍스트

저장을 누르십시오

헤더 메뉴에서 Content 선택 => Add Blog Post를 누르십시오

관리 화면이 생기므로 게시물을 입력하십시오

3개의 블로그 기사를 입력했다

GraphQL로 contentful 데이터 얻기

gatsby-source-contentful

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에서 데이터 검색 시도

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