Gatsby Image not working in nested Sanity pageLinks array query
... on SanityPageLinks {
_key
_type
pageLinks {
linkTitle
linkText {
_rawChildren(resolveReferences: { maxDepth: 10 })
}
photo {
alt
_type
asset {
fluid(maxWidth: 560) {
...GatsbySanityImageFluid
}
fixed(width: 250, height: 125) {
...GatsbySanityImageFixed
}
}
hotspot {
_key
_type
height
width
x
y
}
asset {
_id
}
caption
crop {
_key
_type
bottom
left
right
top
}
}
_type
url {
_type
category {
title
slug {
current
}
}
slug {
current
}
_rawBody(resolveReferences: { maxDepth: 10 })
}
}
}The problem is that both fluid and fixed don’t exist when I try to use them in Gatsby. I’ve used GatsbySanityImageFluid in another part of the site and that works fine so I’m puzzled why it doesn’t work here. Any suggestions as to what I’m doing wrong?
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
Was this answer helpful?
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.
