Gatsbyノート5 (Contentful-1)

11311 ワード
GraphQL gatsby GraphQL テキストリンク

参考

学習内容

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

Contentful

手順

  • Try for free を押す
  • Sign up

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

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

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

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

  • communityを選択

データ構造を作成する

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
    • Rich text

  • Saveを押す

  • ヘッダーメニューから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