Skip to content

Latest commit

 

History

History
58 lines (45 loc) · 2.86 KB

MIGRATION.md

File metadata and controls

58 lines (45 loc) · 2.86 KB

Migration guide

Migrate from gatsby-source-sanity v6.x to v7.x

Note: gatsby-source-sanity v7 requires Gatsby v3 or newer. See Gatsby's official migration guide for more details about how to migrate to Gatsby v3.

Upgrade gatsby-source-sanity to v7.x

💡 In a rush? See this commit for a real-world example of upgrading a project from Gatsby v2 to v3 (but bear in mind that this diff may not be directly translatable to the specifics of your project).

💡 If you get stuck, you can always join our helpful Slack community and ask for assistance in the #gatsby channel.

Steps required:

  • In the dependencies section of your project's package.json, upgrade gatsby to ^3.0.0 and gatsby-source-sanity to ^7.0.0
  • Add "gatsby-plugin-image": "^1.0.0" as a dependency to your package.json. Note: If your package json already has a dependency to gatsby-image, you should remove it and replace its usage with gatsby-plugin-image from source files. See Gatsby's own migration guide for gatsby-plugin-image for more details.
  • Migrate usage of get(Fluid|Fixed)GatsbyImage from pre v7 of gatsby-source-sanity (see section below)

💡️ If you get peer dependency errors or warnings during npm install after finishing the steps above you may also need to update other Gatsby plugins to the version compatible with Gatsby v3. Refer to the documentation for the individual plugins on how to do this.

Migrate from getFluidGatsbyImage() / getFixedGatsbyImage() to getGatsbyImageData()

The helper methods getFluidGatsbyImage and getFixedGatsbyImage have been removed in favor of getGatsbyImageData(), which is based on gatsby-plugin-image and supports a number of cool new features and performance optimizations.

Before

import React from "react"
import Img from "gatsby-image"
import {getFluidGatsbyImage} from "gatsby-source-sanity"
import clientConfig from "../../client-config"

export function MyImage({node}) {
  const fluidProps = getFluidGatsbyImage(
    node,
    {maxWidth: 675},
    clientConfig.sanity
  );
  return <Img fluid={fluidProps} />
}

After

import React from 'react'
import {GatsbyImage} from 'gatsby-plugin-image'
import {getGatsbyImageData} from 'gatsby-source-sanity'
import clientConfig from '../../client-config'

export const MyImage = ({node}) => {
  const gatsbyImageData = getGatsbyImageData(
    node,
    {maxWidth: 675},
    clientConfig.sanity
  )
  return <GatsbyImage image={gatsbyImageData} />
}

Now you should be all set. Happy coding!