CODEWITHSUNDEEP
graphqlgatsbygatsby-imagesanity
Finnian Langham
Finnian Langham

Reputation: 87

Querying images from Sanity for GatsbyImage

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: GraphQL error message

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: enter image description here

Here are the fields available inside the image node: enter image description here

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!

Upvotes: 4

Views: 2052

Answers (2)

kingluddite
kingluddite

Reputation: 11

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
            }
          }
        }
      }

Upvotes: 1

alentejo
alentejo

Reputation: 1130

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}/>
...

Upvotes: 2

Related Questions