Get help on Discord

Trouble displaying images in Gatsby/Sanity project using GraphQL query

5 replies
Last updated: Mar 8, 2021
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
Gatsby Image doesn’t add the fragments in portable text. You could try gatsby-plugin-sanity-image instead. Easier to use, less markup to fuss with, and you don’t have to specify display resolution in your GraphQL queries (and you can vary them dynamically if you want/need to).
Thanks Corey. The image isn’t inside portable text as far as I’m aware. It’s a separate field as part of an array made of up the pageLink title, url and photo. Also I tried gatsby-plugin-sanity-image and as below but got the error message also shown below. Any suggestions?
pageLinks {
            linkTitle
            linkText {
              _rawChildren(resolveReferences: { maxDepth: 10 })
            }
            photo {
              alt
              ...ImageWithPreview
            }
            _type
            url {
              _type
              category {
                title
                slug {
                  current
                }
              }
              slug {
                current
              }
              _rawBody(resolveReferences: { maxDepth: 10 })
            }
          }

There was an error in your GraphQL query:

Fragment "ImageWithPreview" cannot be spread here as objects of type "SanityFigure" can never be of type "SanityImage".

GraphQL request:69:15
68 |               alt
69 |               ...ImageWithPreview
   |               ^
70 |             }
Oh gotcha. You just need to tell Gatsby that 
SanityFigure
is an image type. gatsby-plugin-sanity-image can do that for you using the 
customImageTypes
option in your gatsby-config. You can check the README for the full details, but basically you just want to add this in the plugin options:
customImageTypes: ["SanityFigure"],

great, thanks, I’ll take a look

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?