ブログのnode_modulesをアップグレードしており, メインとなる以下のgatsby関連をアップグレードした.
gatsby-plugin-manifest
でエラーが出ていたのですが, gatsby-config.js を見てみると, 色や名前などデフォルトの状態で利用していなかったので削除した.
$ yarn remove gatsby-plugin-manifest
gatsby-config.js
からも設定情報を削除.
後述する, 画像を扱うpluginに大きな変更があったためか, gatsby-source-contentful
も画像系に仕様変更があった.
既存の画像取得は,
graphql(`
query AllContentfulArticleQuery {
allContentfulArticle(sort: { fields: createdAt, order: DESC }) {
edges {
node {
coverImage {
sizes(maxWidth: 1280) {
aspectRatio
base64
sizes
src
srcSet
}
}
}
}
}
}
`)
となっているが, 以下のように gatsbyImageData
を取得するように変更する.
※仕様変更後もサイズに合わせて取得できるが, 今回は対応しない
graphql(`
query AllContentfulArticleQuery {
allContentfulArticle(sort: { fields: createdAt, order: DESC }) {
edges {
node {
coverImage {
title
gatsbyImageData
}
}
}
}
}
`)
gatsby-image
は非推奨になり, gatsby-plugin-image
を利用することが一般的なようだ.
ここの関連対応が一番大変だった.
まずはmodulesから gatsby-image
を削除して, gatsby-plugin-image
を追加する.
また, 依存しているパッケージのバージョンを指定しておく.
※エラーが出てしまったため
package.json
に以下を追加する.
{
"resolutions": {
"sharp": "^0.29.1"
}
}
$ yarn remove gatsby-image
$ yarn add gatsby-plugin-image
そして, gatsby-config.js
を修正する.
※gatsby-imageはpluginじゃないので, 設定には影響なかった
module.exports = {
plugins: [
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
]
}
上記で gatsby-source-contentful
の対応をしたことで, 型情報と不一致が起きているため, 修正する.
gatsby-plugin
を使っていた部分を,
import { FluidObject } from 'gatsby-image'
type Node = {
coverImage: {
sizes: FluidObject
}
}
gatsby-plugin-image
を利用するように書き換える.
import { IGatsbyImageData } from 'gatsby-plugin-image'
type Node = {
coverImage: {
title: string
gatsbyImageData: IGatsbyImageData
}
}
こちらも gatsby-plugin
を使っている部分を,
import Img from 'gatsby-image'
<Img sizes={node.coverImage.sizes} />
から, gatsby-plugin-image
を利用するように書き換える.
import { GatsbyImage } from 'gatsby-plugin-image'
<GatsbyImage
image={node.coverImage.gatsbyImageData}
alt={node.coverImage.title}
/>
以上の対応で, 一旦問題なくブログが動作するようにはなった.
Twitterフォロー待ってます!