[Gatsbyで構築]gatsby-image から gatsby-plugin-image に変更する方法

本ページはプロモーションが含まれています。

久しぶりにGatsbyの環境をアップデートしたら二つほど重要な変更があったので、それに対応させる作業をしました。

1つ目はgatsby-imageからgatsby-plugin-imageへの変更です。
プラグイン名の変更だけではなく、API等の変更もありましたので、実際に使っている項目で変更を行った部分を書いておきます。

重要な変更の2つ目は別記事にまとめてあります。

プラグインの名前

変更前：gatsby-image
変更後：gatsby-plugin-image

インポートの記述変更

変更前:
import Img from "gatsby-image"

変更後:
import { GatsbyImage } from "gatsby-plugin-image"

GraphQLの呼び出し方変更

fluidがdeprecatedとなりましたので、constrainedに変更しました。

変更前:
childImageSharp {
    fluid(maxWidth: 300) {
        ...GatsbyImageSharpFluid
    }
}

変更後:
childImageSharp {
    gatsbyImageData(layout: CONSTRAINED)
}

表示する方法の変更

変更前：fluid={data.myImage.childImageSharp.fluid}
変更後：image={data.myImage.childImageSharp.gatsbyImageData}

感想

書きやすくなったような気もします。

constrainedに変更しただけで問題なかったのでしばらく様子見です。
width、heightが使えるようなので、必要があれば使ってみます。