Skip to content
Get help on SlackWatch Sanity demo

Issue with `getGatsbyImageData` function when using `gatsby-source-sanity` and `gatsby-plugin-image`

3 replies
Last updated: Apr 8, 2021
Hey all, I'm trying to use the new 
gatsby-plugin-image
1.2.0, with an old project that I've switched to Gatsby v3 with 
gatsby-source-sanity
7.0.0.I'm following the current 
gatsby-source-sanity
Github docs under "Using images"...
import React from 'react'
import {getGatsbyImageData} from 'gatsby-source-sanity'
import {GatsbyImage} from 'gatsby-plugin-image'

const sanityConfig = {projectId: 'abc123', dataset: 'blog'}

const Person = ({data}) => {
  const imageData = getGatsbyImageData(data.sanityPerson.profileImage.asset, {maxWidth: 700}, sanityConfig)
  return (
    <article>
      <h2>{data.sanityPerson.name}</h2>
      <GatsbyImage image={imageData}/>
    </article>
  )
}

export default Person

export const query = graphql`
  query PersonQuery {
    sanityPerson {
      name
      profileImage {
        asset
      }
    }
  }
`
...but I'm having an issue with the 
getGatsbyImageData
function. Passing the function just the 
asset
object with its 
id
and 
url
(The example code above is showing an empty 
asset
object which errors with 
GraphQLError: Field "asset" of type "SanityImageAsset" must have a selection of subfields. Did you mean "asset { ... }"?
) I get the runtime error 
can't access property "split", id is undefined
. I can resolve the issue by just passing the 
asset.id
but this isn't what the documentation shows. This also breaks with the same error if I query the image for 
gatsbyImageData
, which the 
gatsby-plugin-image
docs have lead me to believe is how the new image plugin works.
I feel like the documentation is missing something? Does anyone have some experience with this? Any help appreciated!
Apr 2, 2021, 4:08 AM
Hello! I had this same problem - seems to be resolved if you just pass in asset.id. So far that is working from me, but yeah that isn't clear in the docs I had to figure it out too.
Apr 2, 2021, 5:37 PM
Hi, yes I have been experiencing all of those same problems....
Apr 6, 2021, 5:40 AM
I’ve been agonizing over this issue for a good chunk of the day and the asset.id thing worked for me. Thank you!
Apr 8, 2021, 9:06 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?

Categorized in