Gatsby v3に移行した

気付いたらGatsby v3が出ていました。移行はそこまで大変ではなさそうなので移行してみます。

何をするにもまず公式の移行ガイドをブラウザで開いて、移行作業をはじめる前の状況をcommitしておくのがよいです。

まずはGatsby本体とReactを更新します。

npm install gatsby@latest react@latest react-dom@latest

npm outdatedを叩いて、出てきたパッケージをひたすら更新していきます。

npm install gatsby-image@latest gatsby-plugin-manifest@latest gatsby-plugin-netlify@latest gatsby-plugin-offline@latest gatsby-plugin-sharp@latest gatsby-plugin-typescript@latest gatsby-remark-images@latest gatsby-source-contentful@latest gatsby-source-filesystem@latest gatsby-transformer-remark@latest gatsby-transformer-sharp@latest

私の環境ではPostCSSまわりで怒られたので、PostCSSも最新のものを明示的にインストールしておくことにします。

npm install postcss@latest postcss-loader@latest

このブログの場合はこれだけで移行はほとんど完了し、あとはgatsby-source-contentful由来のエラーが多少出ている程度です。

またこのブログではカバー画像などの表示にgatsby-imageを使っていたのですが、新しいgatsby-plugin-imageが出ていたのでそちらにも移行しました。

まずはプラグインをインストールして

npm install gatsby-plugin-image gatsby-plugin-sharp

gatsby-config.jsで有効化します。

module.exports = {
  plugins: [
    `gatsby-plugin-sharp`,
    `gatsby-plugin-image`,
    // ...etc
  ],
}

ここからはソースにもよりますが、たとえばContentfulならこんなGraphQLクエリーを書いていたところが

cover {
    fluid(maxWidth: 750, quality: 100) {
        srcWebp
        srcSetWebp
        srcSet
        src
        sizes
        aspectRatio
        base64
    }
}

こんな感じになります。

cover {
    gatsbyImageData(
        layout: FULL_WIDTH,
        quality: 100,
        placeholder: BLURRED
    )
    title
}

コンポーネント内での呼び出しはこんな感じ。公式のドキュメントを見てもらったほうが早いような気もします。これまでのgatsby-imageの良さはそのままに、よりシンプルに使えるようになった印象です。

...
import { GatsbyImage, getImage } from "gatsby-plugin-image"
 
export default function PostLink({ post }) {
    const coverImg = getImage(post.cover);
    const coverTitle = post.cover.title;
 
    return (
        <div className="postlist_item">
            <GatsbyImage image={ coverImg } className="cover" alt={ coverTitle } />
        </div>
    )
}

追記 2021/3/11

gatsby-source-contentful がアップデートされて、contentful関係のエラーも出なくなりました。これで完全に移行完了といってよさそうです。