More than 1 year has passed since last update.

Gatsby.jsとContentfulで型を自動生成した話

Last updated at 2023-07-17Posted at 2023-07-17

こちら、まだ個人の備忘録レベルの記事となります
ですが、同じところで詰まった方向けに先行メモしておきます
Gatsby.jsってそんなに使っている人いないって？そうですよね。。なんか記事少ないので、誰か投稿してください！

LGTM

Gatsby.jsとContentfulで型を自動生成する方法のベース
- Sean C DavisさんのYoutubeがわかりやすいかと思います
上記動画の通りにすると"Type does not satisfy the constraint 'EntrySkeletonType'."と怒られる場合
- package.jsonの"cf-generate-types"に-Xをつけて--outすればOK
- 例）"cf-generate-types": "cf-content-types-generator contentful/export.json -X --out types/contentful"

大して詳細ではないかもしれない詳細

1.npm install -D contentful-cli
- これから使うcf-content-types-generatorのコマンドが使えるようになるcontentfulのCLI
2.npm install -D cf-content-types-generator
- 型を自動生成してくれるメイン役
3.package.jsonに以下を追記

package.json

     "scripts": {
        "cf-export": "contentful space export --config contentful/export-config.json --management-token マネジメントトークンを入れてね --space-id スペースIDをいれてね",
        "cf-generate-types": "cf-content-types-generator contentful/export.json -X --out types/contentful"

動画では-Xが付いていないのですが、issueの通りエラーがあがるので、issueに書いてある対応をしています。

4.ディレクトリのトップに"contentful"という名前のディレクトリを作成し、export-config.jsonを作成する
- 中身は以下のとおり

export-config.json

{
  "exportDir": "contentful",
  "contentFile": "export.json",
  "downloadAssets": true
}

5.npm run cf-export

Contentful内容がすべてエキスポートされます。
エキスポート場所は、contentful内のexport.jsonです
画像がある場合はimages.ctfassets.net内に入ります

6.npm run cf-generate-types

ディレクトリトップにtypesフォルダが作成され、すべてのcontent typeに対して型を生成してくれます
あとは好きに使ってね！

Gatsby.jsとContentfulで型を自動生成した話

LGTM

大して詳細ではないかもしれない詳細

関連資料