Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

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?
Mar 8, 2021, 8:57 PM
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).
Mar 8, 2021, 9:04 PM
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 |             }
Mar 8, 2021, 9:38 PM
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"],

Mar 8, 2021, 9:40 PM
great, thanks, I’ll take a look
Mar 8, 2021, 9:42 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?