🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

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

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?