GatsbyJS + Contentfulを試してみる。

GatsbyJSとContentfulの組み合わせがどんな感触なのか気になって試してみました。

始めはgatsby-starter-blogを使って、リポジトリ内のMarkdownを記事として参照する部分を書き換え、ContentfulのAPIから記事を参照するように挑戦していたのですが、なかなか上手くいきませんでした。

ところが、よく見てみるとContentful公式サイトに「5分ではじめるGatsbyJSとContentful」という記事があり、GatsbyにContentfulを連携する雛形が存在することにも気づきました。
（最初からこの記事に気づけばよかった…！😭）

試してみて少し詰まった部分があったのでまとめました。
（5分では始められなかったですが、15分くらいでできました。）

雛形を用意する

事前にGatsbyをインストールした上で下記のコマンドを実行します。
$ gatsby new contentful-starter https://github.com/contentful-userland/gatsby-contentful-starter

Content Modelの定義に引っかかる

以前Contentfulを試した際に自前でBlog PostのContent Modelを定義していたので、リポジトリ上でContentfulのAPIキー情報を設定をした上で、あとは $ npm run dev コマンドで開発環境を起動すればいいのかと思ったのですが、これがいけませんでした。

（後からよくよく考えれば当然ではあるのですが、Blog Postの定義がリポジトリ上のものと異なり、GraphQLの部分でエラーを起こし、まったく表示されない状態となりました。）

リポジトリ内と公式の記事を再度確認していたところ、セットアップコマンドを実行すると Blog Post の定義と、リポジトリ内の conntentful/export.json を元にサンプル記事をContentfulにエクスポートしてくれる機能がありました。

お試しでアップしていた記事と、自前で定義したContent Model（Blog Post）を削除し、公式サイトの記事同様に使用するスペースを一度まっさらにしました。

セットアップ時に言語設定で引っかかる

次にセットアップコマンドである $ npm run setup を実行するとこういったエラーが出ました。

[
  {
    "ts": "2020-09-28T10:47:40.313Z",
    "level": "error",
    "error": {
      "originalError": {
      },
      "stacktrace": [
        "Error: Error: Please make sure the destination space have the same default locale as the source Default locale for source space : en-US Default locale for destination space: ja ",
        "/Users/minamo/***/node_modules/contentful-batch-libs/dist/listr.js:24:27"
      ]
    }
  }
]

このエクスポートファイルは英語（en-US）でContentfulのスペースのデフォルトの言語設定と一致している必要がある（＝日本語（ja）のスペースにはこのエクスポートができない）旨のメッセージでした。

今後もブログ記事は日本語主体で書くつもりですので、できればデフォルトの言語設定は日本語のままにしておきたいところです。
雑ではありますが、 export.json の en-US となっている部分を ja に置き換えればいけるのではないかと試したところ、上手くいきました。
（Gistに置き換え後のexport.jsonを置きました。）

無事にエラーも発生しなかったようです。

開発環境の起動

$ npm run dev を実行し、 http://localhost:8000/ にアクセス。
無事にJohn Doeさんのおしゃれサイトが見えるようになりました🎉