😎 Discover cool tips and tricks for customization in our next Developer Deep Dive virtual event - sign up now!

How to Fetch All Images References in a GROQ Request

11 replies
Last updated: May 5, 2021
Is there be a way to fetch all images references in a GROQ request without specifying every single field?As I need the
asset
part of the field mostly, that'd be great 😄 (url, dimensions, fields linked to it, etc)
*[_id == "spring"].content {
  place_banner_1 {
  	alt,
  	photo {
    asset-> {
        url,
        "width": metadata.dimensions.width,
        "height": metadata.dimensions.height,
  			"ratio": metadata.dimensions.aspectRatio
      }
  	}
  },
  place_banner_2,
  place_banner_3...
}
May 4, 2021, 7:21 PM
well all these banners have the exact same fields so that'd be redundant to rewrite every file to fetch yea
May 4, 2021, 7:28 PM
Is it possible to migrate into an array, which you could then traverse?
May 4, 2021, 7:43 PM
meaning that I'd have to use it like
banners[0]
etc? If yes, I'd prefer to keep an object key if possible
May 4, 2021, 7:45 PM
user A
ideally if I could do something like this that'd be dope 😄
May 4, 2021, 8:04 PM
{
  // Seasons
  "spring": *[_id == "images_spring"][0].content {
  	[place_banner_1, place_banner_2, place_image_1] {
      alt,
      "image": photo.asset-> {
        url,
        "width": metadata.dimensions.width,
        "height": metadata.dimensions.height,
        "ratio": metadata.dimensions.aspectRatio
      }
    }
	}
}
May 4, 2021, 8:04 PM
or, eventually, a sort of shortcut to avoid repeating the fields inside of each so I can reuse a variable or something patterny
May 4, 2021, 8:06 PM
I asked about your use case and it doesn’t sound like there’s a way to achieve this sort of catch-all of keys (e.g.,
*[_id == "spring"].content.*.photo.asset->
). Using an array would let you traverse that array, saving you from having to specify all these keys more than once.
May 5, 2021, 2:32 PM
I asked about your use case and it doesn’t sound like there’s a way to achieve this sort of catch-all of keys (e.g.,
*[_id == "spring"].content.*.photo.asset->
). Using an array would let you traverse that array, saving you from having to specify all these keys more than once.
May 5, 2021, 2:32 PM
user N
could you send some example code? been following this thread since i was looking into something similar
May 5, 2021, 5:58 PM
Sure! but be careful, it hurts haha, took me 1/2h to figure out with the
dedent
thing:
// Sanity Images query
const query = dedent`
    *[_id == "images_${season}"][0].content {
        // Carousel
        // TODO

        // Banners
        ${[...Array(3)].map((_, i) => dedent`
            place_banner_${i + 1} {
                "alt": photo.alt,
                "image": photo.asset-> {
                    url,
                    "width": metadata.dimensions.width,
                    "height": metadata.dimensions.height,
                    "ratio": metadata.dimensions.aspectRatio
                }
            },
        `).join('')}

        // Image blocks
        ${[...Array(4)].map((_, i) => dedent`
            place_image_block_${i + 1} {
                ${['foreground', 'background'].map(image => dedent`
                    "${image}": ${image}.photo {
                        alt,
                        "image": asset-> {
                            url,
                            "width": metadata.dimensions.width,
                            "height": metadata.dimensions.height,
                            "ratio": metadata.dimensions.aspectRatio
                        }
                    },
                `).join('')}
            },
        `).join('')}
    }
`
May 5, 2021, 6:01 PM
technically it is the same code written a lot inside of the query, but visually it's not as bad as repeating it
May 5, 2021, 6:03 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?