Querying images from Sanity for GatsbyImage

Question

I'm having trouble sourcing images from Sanity using the new gatsby-plugin-image. The documentation says to do the following:

import React from 'react'
import {getGatsbyImageData} from 'gatsby-source-sanity'
import {GatsbyImage} from 'gatsby-plugin-image'

const Person = ({data}) => {
  const imageData = getGatsbyImageData(data.sanityPerson.profileImage.asset)
  
  return <GatsbyImage image={imageData}/>
}

export default Person

export const query = graphql`
  query PersonQuery {
    sanityPerson {
      profileImage {
        asset
      }
    }
  }
`

However when I try and query the image asset, I get the following error:

My query looks like this:

export const query = graphql`
  query MyQuery {
    allSanityAbout {
      nodes {
        about_text
        about_image {
          alt
          image {
            asset
          }
        }
      }
    }
  }
`;

The docs also say that "Any GraphQL File object that includes an image will have a childImageSharp field" but I can't work out how to query for it:

Here are the fields available inside the image node:

I get errors telling me Cannot query field "childImageSharp" on fields SanityImage or SanityImageAsset if I try and query for childImageSharp on the image or asset nodes.

Any pointers greatly appreciated!

Answer 1

Things changed a bit in the recent version of both Gatsby and Sanity. In their example, you can see that their getGatsbyImageData function is using the asset object directly object as parameter (and not using -> image -> asset like in the gatsby docs you are refering to). There is no use for fluid or fixed in the GastbyImage in Gatsby V3. In your case, you could try querying like this:

export const query = graphql`
  query MyQuery {
    allSanityAbout {
      nodes {
        about_text
        about_image {
          asset
          alt
        }
      }
    }
  }
`;

Sending the return asset object to the sanity method getGatsbyImageData should work. Note how this method is getting the image parameter for you to use in GatsbyImage

...
  const imageData = getGatsbyImageData(data.sanityPerson.profileImage.asset)
  return <GatsbyImage image={imageData}/>
...

Answer 2

Getting Sanity and Gatsby to play nice is different. I was using the Wes Bos Mastering Gatsby but gatsby-image has changed since his video and this is how I got the latest Gatsby V3 GraphiQL API consuming an image from the Sanity GraphQL API

    import React from 'react'
    import { graphql } from 'gatsby'
    import { GatsbyImage, getImage } from 'gatsby-plugin-image'
    
    export default function AboutUsPage({ data }) {
      const { heading, image } = data.aboutUs
      const imagePlaceholder = getImage(image.asset)
    
      return (
        <div>
          <h1>About Us</h1>
          <GatsbyImage image={imagePlaceholder} alt={heading} />
          <p>{heading}</p>
        </div>
      )
    }
    
    export const query = graphql`
      query MyQuery {
        aboutUs: sanityAboutUs {
          heading
          image {
            asset {
              gatsbyImageData
            }
          }
        }
      }