Get help on Discord

Gatsby Image not working in nested Sanity pageLinks array query

5 replies
Last updated: Jan 28, 2026
I have a pageLinks section in a Gatsby/Sanity project I’m building. I’m using this in part of an array of page builder elements. I’m having problems getting the images in this to display using Gatsby Image. Here’s the GraphQL query I’m currently using:

... 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?
AI Update

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:

  1. First asset block has fluid and fixed with the Gatsby image fragments
  2. Second asset block 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 thread
5 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.

Get started for freeExplore the demo

Was this answer helpful?