Gatsby Image not working in nested Sanity pageLinks array query
Based on your GraphQL query, I can see the issue - you have duplicate asset fields in your query, which is causing the problem. You're querying photo.asset twice: once with the fluid and fixed fields, and then again with just _id.
Here's what's happening:
- First
assetblock hasfluidandfixedwith the Gatsby image fragments - Second
assetblock only has_id
GraphQL doesn't allow duplicate field names at the same level, and the second asset query is likely overwriting the first one, removing your fluid and fixed data.
The fix: Remove the duplicate asset field and combine them into one. Here's the corrected query:
... on SanityPageLinks {
_key
_type
pageLinks {
linkTitle
linkText {
_rawChildren(resolveReferences: { maxDepth: 10 })
}
photo {
alt
_type
asset {
_id
fluid(maxWidth: 560) {
...GatsbySanityImageFluid
}
fixed(width: 250, height: 125) {
...GatsbySanityImageFixed
}
}
hotspot {
_key
_type
height
width
x
y
}
caption
crop {
_key
_type
bottom
left
right
top
}
}
_type
url {
_type
category {
title
slug {
current
}
}
slug {
current
}
_rawBody(resolveReferences: { maxDepth: 10 })
}
}
}The key change is moving _id into the first asset block and removing the second one entirely. This way, you'll get the _id along with your fluid and fixed image data.
This is a common mistake when building complex GraphQL queries - it's easy to accidentally duplicate fields when you're querying nested structures. Since this works elsewhere in your site, the duplicate field is definitely the culprit here.
Show original thread5 replies
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.