🔮 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
1.2.0, with an old project that I've switched to Gatsby v3 with
7.0.0.I'm following the current
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 (
      <GatsbyImage image={imageData}/>

export default Person

export const query = graphql`
  query PersonQuery {
    sanityPerson {
      profileImage {
...but I'm having an issue with the
function. Passing the function just the
object with its
(The example code above is showing an empty
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
but this isn't what the documentation shows. This also breaks with the same error if I query the image for
, which the
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?