How to Fetch All Images References in a GROQ Request
11 replies
Last updated: May 5, 2021
F
Is there be a way to fetch all images references in a GROQ request without specifying every single field?As I need the
assetpart 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
F
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
G
Is it possible to migrate into an array, which you could then traverse?
May 4, 2021, 7:43 PM
F
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
F
user A
ideally if I could do something like this that'd be dope 😄May 4, 2021, 8:04 PM
F
{
// 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
F
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
G
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., ). Using an array would let you traverse that array, saving you from having to specify all these keys more than once.
*[_id == "spring"].content.*.photo.asset->
May 5, 2021, 2:32 PM
G
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., ). Using an array would let you traverse that array, saving you from having to specify all these keys more than once.
*[_id == "spring"].content.*.photo.asset->
May 5, 2021, 2:32 PM
R
user N
could you send some example code? been following this thread since i was looking into something similarMay 5, 2021, 5:58 PM
F
Sure! but be careful, it hurts haha, took me 1/2h to figure out with the
dedentthing:
// 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
F
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.