Issue with accessing metadata in gatsby-plugin-sanity-image and how to fix it.

12 replies
Last updated: Apr 1, 2021
Hello all! I'm working to get my images working using the gatsby-plugin-sanity-image but I'm getting an error that the metadata can't be accessed. Anyone know how to fix this? Here's the repo and I'm including a screenshot of the error.
Mar 30, 2021, 11:56 AM
can you point to where in the repo you’re using this, and where you’re GraphQL is?
Mar 30, 2021, 1:30 PM
Also, 👏 for building a HOA site - if you aren’t already you’ll be a shoe-in for the board someday 😜
Mar 30, 2021, 1:31 PM
Looks like you’re not setting the asset prop on the SanityImage component.
Mar 30, 2021, 1:36 PM
Haha, thanks Chris. It’s boardMembers.JS under pages folder. Thanks Corey, I followed the example on to set it up; I know it’s a newbie question but what should that asset prop look like?
Mar 30, 2021, 1:41 PM
const TileImage = ({ post, className }) => {
  const data = useStaticQuery(graphql`
    query {
      allSanityPost {
        nodes {
          mainImage {


return <SanityImage {...thisPost.mainImage} {...imageConfig}></SanityImage>;
I do something like this
Mar 30, 2021, 1:51 PM
You might want to look at the README on Github instead. There are a bunch of useful tables that describe the props, but Sanity outputs the raw markdown as plaintext.
Mar 30, 2021, 4:14 PM
Ok I will check this out later today and see if I can get it working. Thanks!
Mar 30, 2021, 4:19 PM
Ok, I've checked the README & worked on the code and I still don't get it, so I probably didn't do a good job explaining the issue - entirely my fault. Here's an example of what I'm trying to do in a page file, not a component file:
import React from 'react':
import { graphql } from 'gatsby';
import SanityImage from 'gatsby-plugin-sanity-image';

export default function ReturnsThePage({ data, image, asset }) { 
   const listOfData = data.listOfData.nodes; 
   return ( 
      <MyStyleComponent key={listOfData._id}> 

export const query = graphql`
   query {
      listOfData: allSanityListofData { 
         nodes { 
            image { 
               asset { 
From the error I'm getting I'm certain this is likely just a syntax error, but I don't understand what is off.
Mar 31, 2021, 11:32 AM
best I can tell, your query returns a LIST of nodes, and you’re trying to stuff them all into one component (in a way that won’t work). You probably want a>{react component}
type of thing
Mar 31, 2021, 1:26 PM
and you’re destructuring the node in your input incorrectly. Should jsut be
ReturnsThePage({ data })
and you want to spread the image asset into the sanity component later like
<SanityImage {…data.image}
Mar 31, 2021, 1:28 PM
Your syntax looks kind of funky… 
You probably want something like this instead:

<SanityImage {...image} alt={name} />
But you also aren’t looping through the list of
before you output anything, either. All combined, this might be closer to what you’re after:
export default function ReturnsThePage({ data: { listOfData: { nodes: listOfData }) {
   return => ( 
      <MyStyleComponent key={list._id}> 
         <SanityImage {...list.image} alt={} /> 
Mar 31, 2021, 1:50 PM
Thank you Corey & Chris for your help. I did have the .map in my code and forgot to include it in my example. The answer was as simple as spreading in {...member.image} instead of {...image}. 🤦‍♂️ Thanks again! 🎉
Apr 1, 2021, 10:55 AM

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.

Was this answer helpful?

Categorized in