初心者による初心者のためのGatsbyJS覚書7（ブログのコンテンツを準備する）

この記事について

この記事はGatsbyJS初心者の新卒２年目が作成しています。
参考資料として書籍を使用していますが、筆者がビギナークラスのため読んでいて「？」となる部分や間違っている箇所もあるかと思います。
参考までに、そして間違えている箇所がありましたらご連絡いただけると嬉しいです。

Chapter7：ブログのコンテンツを用意する　備忘録メモ

1.Contentfulの準備
2.GraphQLでデータを取り込む準備をする

Contentfulの準備

ContentfulのFreeプランを利用してSpace「Blog」を作成します。
Githubのアカウントを持っていればすぐに作成できます。

今回は購入本のGithubからダンロードできるContentfulのデータをインポートする方法でデータを作成したいと思うので
指示書の指定通り「Settings > Locales」から「ja-JP」を選択し、保存します。

スペースIDとアクセストークンを控えておきます。
「Settings > API　Keys」の「Content delivery/previews token」のタブから確認できます。
ない場合は「Add API key」から作成します。

パーソナルアクセストークンを作成します。
API の管理画面に戻り、「Content management tokens」のタブに切り替え、「Generate Personal Token」をクリックします。
生成されたトークンは一度きりしか表示されないため、必ず控えておくようにします。

Contentfulのデータをインポートする
※この手順は購入本のGithubからダンロードできるContentfulのデータがある前提で進みます
ない場合はスキップしてください。

importConfig.jsonを開いて中身を更新

{
  "spaceId": "XXXXXXXXXXXXX",
  "managementToken": "XXXXXXXXXXXXXXXXXXXXX", //前工程のパーソナルアクセストークンを使用する
  "contentFile": "blog-ja-JP.json"
}

contentful-data/配下で実行
トークンはパーソナルアクセストークンを使用する

npx contentful-cli login --management-token xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

インポートを実行。
ロケールが間違っているとエラーがでるので注意

npx contentful-cli space import --config importConfig.json

「The import was successful.」と表示されたらログアウトする

npx contentful-cli logout

GraphQLでデータを取り込む準備をする

プラグインを準備する

npm install gatsby-source-contentful

gatsby-config.jsに下記を追記。
コード内にトークンを残さないために環境変数を使用する。

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

サーバーを起動する
このときのアクセストークンは、アクセストークンを使用。
パーソナルアクセストークンではエラーとなる。

CONTENTFUL_SPACE_ID=XXXXXXXX CONTENTFUL_ACCESS_TOKEN=XXXXXXXXXX CONTENTFUL_HOST=cdn.contentful.com gatsby develop -H 0.0.0.0

GraphQLを開き、インポートしたデータが選択できるようになっていれば成功。

今回はここまで。