Issue with accessing metadata in gatsby-plugin-sanity-image and how to fix it.
12 replies
Last updated: Apr 1, 2021
B
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
W
can you point to where in the repo you’re using this, and where you’re GraphQL is?
Mar 30, 2021, 1:30 PM
W
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
W
Looks like you’re not setting the asset prop on the SanityImage component.
Mar 30, 2021, 1:36 PM
W
Haha, thanks Chris. It’s boardMembers.JS under pages folder. Thanks Corey, I followed the example on sanity.io 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
W
const TileImage = ({ post, className }) => {
const data = useStaticQuery(graphql`
query {
allSanityPost {
nodes {
id
mainImage {
alt
...ImageWithPreview
}
}
}
}
`);
...
return <SanityImage {...thisPost.mainImage} {...imageConfig}></SanityImage>;Mar 30, 2021, 1:51 PM
W
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. https://github.com/coreyward/gatsby-plugin-sanity-image
Mar 30, 2021, 4:14 PM
W
Ok I will check this out later today and see if I can get it working. Thanks!
Mar 30, 2021, 4:19 PM
W
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:
From the error I'm getting I'm certain this is likely just a syntax error, but I don't understand what is off.
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}>
<div>
{SanityImage
{...image}
{...asset}
alt={listOfData.name}
</div>
</MyStyleComponent>
);
}
export const query = graphql`
query {
listOfData: allSanityListofData {
nodes {
name
_id
image {
asset {
_id
}
...ImageWithPreview
}
}
}
`;Mar 31, 2021, 11:32 AM
W
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
data.listOfData.nodes.map(()=>{react component} type of thingMar 31, 2021, 1:26 PM
W
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
W
Your syntax looks kind of funky…
You probably want something like this instead:
But you also aren’t looping through the list of
{SanityImage
{...image}
{...asset}
alt={listOfData.name} <SanityImage {...image} alt={name} />nodesbefore you output anything, either. All combined, this might be closer to what you’re after:
export default function ReturnsThePage({ data: { listOfData: { nodes: listOfData }) {
return listOfData.map(list => (
<MyStyleComponent key={list._id}>
<SanityImage {...list.image} alt={list.name} />
</MyStyleComponent>
));
}Mar 31, 2021, 1:50 PM
W
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.