GatsbyJSからContentfulをリッチテキストで読み込む
GatsbyJSの(2021年1月現在唯一の書店で売られている)教本
『Webサイト高速化のための静的サイトジェネレーター活用入門』の情報に一部に、
プラグインのヴァージョン更新で記法が変わった箇所があります。
Contentfulのリッチテキスト(RichText)のプラグインが 2020/11/9 に v.3.1.1 → v.4 になり、
教本の記法が使えなくなりました。
教本の記法のまま進める方法
v.3.1.1 をインストールする
code:terminal
$ yarn add gatsby-source-contentful@3.1.1
V.4.x.x〜でやる ( 4.6.0-next.1 (2021-01-26) )
こちらのほうが今後主流になる筈なのでがんばります
このページと、このページのリンク先に全部書いてあるので 必読
変更点まとめ
クエリ: json のかわりに raw に変更
リッチテキストの描画は gatsby-source-contentful/rich-text を読み込んでrenderRichText() を使う
リッチテキストの画像を表示するためのユーティリティが不要になった
画像取得:クエリにcontentful_id __typename を追加する
教本の変更箇所
◆ p.214 "②リッチテキストを扱えるようにする"
Before
ここではリッチテキストの(〜)「rich-text-react-renderer」をインポートします。
After
「gatsby-source-contentful/rich-text」をインポート
code:src/pages/bogpost.js
import { renderRichText } from "gatsby-source-contentful/rich-text"
◆ p.215 STEP7-6 "③リッチテキストを表示する"
code:src/pages/bogpost.js
<div className="postbody">
{renderRichText( data.contentfulBlogPost.content, {} )}
</div>
...
export const query = graphql`
query {
contentfulBlogPost {
title
...
eyecatch {
fluid(maxWidth: 1600) {
...GatsbyContentfulFluid_withWebp
}
description
}
content {
# json → raw に変更
raw
}
}
}
`
◆ p.217 STEP7-7 "②見出しにアイコンを付ける"
export default ({ data }) => () 記法も辞める (これは教本のGItHubにも書いてある)
code:src/pages/blogpost.js
// export default ({ data }) => (...) の部分
export default function Blogpost({ data }) {
return(
<Layout>
...
<div className="postbody">
// 読み込むデータを変更
// Before: data.contentfulBlogPost.content.json
// After: data.contentfulBlogPost.content
{renderRichText(data.contentfulBlogPost.content, options)}
</div>
</Layout>
)
}
◆ p.218 STEP7-8 "リッチテキスト内の画像を表示する" ①〜③
ユーティリティ utils/useContentfulImages.js が不要になった
クエリはSTEP.8で書くので割愛
◆ p.234 STEP8-1 ⑥"記事ごとのデータを自動生成する"
変数を使ったページクエリに書き換えついでに
ContentfulAsset(画像が入っている) のcontentful_idと __typename を明示する
... on 記法:型に応じて取得するフィールドを選択
code:templates/blogpost-template.js
export const query = graphql`
query($id: String!) {
contentfulBlogPost(id: { eq: $id }) {
title
publishDateJP:publishDate(formatString: "YYYY年MM月DD日")
publishDate
category {
category
categorySlug
id
}
eyecatch {
fluid(maxWidth: 1600) {
...GatsbyContentfulFluid_withWebp
}
description
}
content {
raw
references {
... on ContentfulAsset {
contentful_id
__typename
file {
url
}
}
contentful_id
title
fluid(maxWidth: 785) {
...GatsbyContentfulFluid_withWebp
}
}
}
}
}
`
GItHubドキュメントのコピペです
公式ドキュメントは 未 更 新 だよ!!
学習中、また違うところが出てきたら加筆します。