Chapter 17

Contentfulの連携

ここではブログのデータをContentfulに保存しGraphQLで取得する方法について説明していきます。

データの登録

contentfulのページのメニュー上部より「Content」を選びます。
「Add Post」ボタンを押してデータを作成します。
data-register-1.png

データを入力し、右上の「DRAFT」ボタンを押し、表示されるメニューから「PUBLISH」を選択し公開します。
※ 画像データについても「PUBLISH」にしておく必要があります。
data-register-2.png

API連携

GatsbyからContentfulのデータを取得できるようにAPI連携を行っていきます。

APIキーの取得

メニューより「Settings」->「API keys」を選択します。
api-connect.png

「Content delivery / previeww tokens」より、「Example Key 1」を選択します。
「Space ID」と「Content Delivery API - access token」を覚えておきます。
※ APIキーは他人に教えたり、外部に公開しないようにしましょう。データを操作されてしまう恐れがあります。
api-key.png

環境変数の設定

環境変数をファイルから利用するためのライブラリdotenvをインストールします。

$ npm install --save dotenv

プロジェクト直下に.env.developmentファイルを用意し、先程確認した値を設定します。
このファイルに設定することで、開発環境下で環境変数として利用することができます。

GATSBY_CONTENTFUL_SPACE_ID=[スペースID]
GATSBY_CONTENTFUL_API_KEY=[APIキー]

プラグインの導入

プラグインを導入することでGatsbyとContentfulの連携が行なえます。

$ npm install --save gatsby-source-contentful

gatsby-config.jsに利用する環境変数ファイルとプラグイン情報を書くことができ、以下のように設定します。
.env.developmentはデフォルトで.gitignoreに追加されているため、バージョン管理されずローカルにのみ保存されます。そのため、Githubにソースコードをアップロードした際にAPIのキーが外部に公開されることを防いでいます。

gatsby-config.js
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  siteMetadata: {
    title: "Dev Blog",
    description: "Gatsbyで作成したブログサイトです。",
    author: "Engineer X"
  },
  plugins: [
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.GATSBY_CONTENTFUL_SPACE_ID,
        accessToken: process.env.GATSBY_CONTENTFUL_API_KEY
      }
    }
  ],
}

gatsby developでエラーが発生する場合

エラーが発生していない場合は読み飛ばしてください。
gatsby developを行った際に下記のようなエラーが発生する場合があります。
Reactのバージョンが低いことによって原因のようです。

 ERROR 

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.


 ERROR 

Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.


 ERROR 

UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.



  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

この問題を解決する方法としては、node_modulespackage-lock.jsonを削除した後パッケージをアップデートします。再度gatsby developを実行すれば問題なく開発サーバーが立ち上げると思います。

$ npm update

$ gatsby develop