Gatsbyを2系から4系にアップグレード

背景

ブログのnode_modulesをアップグレードしており, メインとなる以下のgatsby関連をアップグレードした.

• gatsby 2.17.10 → 4.20.0
• gatsby-image 2.2.30 → 3.11.0
• gatsby-plugin-emotion 4.1.13 → 7.20.0
• gatsby-plugin-google-analytics 2.1.27 → 4.20.0
• gatsby-plugin-manifest 2.2.26 → 4.20.0
• gatsby-plugin-offline 3.0.18 → 5.20.0
• gatsby-plugin-react-helmet 3.1.16 → 5.20.0
• gatsby-plugin-sass 2.1.20 → 5.20.0
• gatsby-plugin-sharp 2.2.36 → 4.20.0
• gatsby-plugin-sitemap 2.2.24 → 5.20.0
• gatsby-plugin-twitter 2.1.12 → 4.20.0
• gatsby-plugin-typescript 2.1.15 → 4.20.0
• gatsby-remark-prismjs 3.3.21 → 6.20.0
• gatsby-source-contentful 2.1.55 → 7.18.0
• gatsby-source-filesystem 2.1.35 → 4.20.0
• gatsby-transformer-remark 2.6.32 → 5.20.0
• gatsby-transformer-sharp 2.3.2 → 4.20.0

gatsby-plugin-manifestの削除

gatsby-plugin-manifest でエラーが出ていたのですが, gatsby-config.js を見てみると, 色や名前などデフォルトの状態で利用していなかったので削除した.

$ yarn remove gatsby-plugin-manifest

gatsby-config.js からも設定情報を削除.

gatsby-source-contentfulの対応

後述する, 画像を扱う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-image は非推奨になり, gatsby-plugin-image を利用することが一般的なようだ.
ここの関連対応が一番大変だった.

pluginの設定

まずは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
	}
}

jsx部分を書き換える

こちらも 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}
/>

以上の対応で, 一旦問題なくブログが動作するようにはなった.