How to fetch an array of images using groq in Sanity.io
5 replies
Last updated: May 21, 2023
N
Hello everyone,
I would like to fetch the array of the Images, but i don't know how to fetch it with the groq correctly. So, i assumed that i should write like this:
return client.fetch(
groq`*[_type == 'page' && slug.current == $slug][0]{
_id,
_createdAt,
"mainImage": mainImage.asset->url,
"image": images[].asset->url, //I am also querying images array here. //Array of Images
title,
"slug": slug.current,
content,
alt
}`,
{slug}
)
}
Hovewer, when i am debugging my function, my images in the console written as "null". Hence, what i should wtite to get my all Array of the Images?
P.S. {
//Here is the input that i created for Images array inside my Sanity studio
name: "image",
title: "Image",
type: "array",
of: [{ type: 'image' }],
options: { hotspot: true },
},
I would like to fetch the array of the Images, but i don't know how to fetch it with the groq correctly. So, i assumed that i should write like this:
return client.fetch(
groq`*[_type == 'page' && slug.current == $slug][0]{
_id,
_createdAt,
"mainImage": mainImage.asset->url,
"image": images[].asset->url, //I am also querying images array here. //Array of Images
title,
"slug": slug.current,
content,
alt
}`,
{slug}
)
}
Hovewer, when i am debugging my function, my images in the console written as "null". Hence, what i should wtite to get my all Array of the Images?
P.S. {
//Here is the input that i created for Images array inside my Sanity studio
name: "image",
title: "Image",
type: "array",
of: [{ type: 'image' }],
options: { hotspot: true },
},
May 20, 2023, 12:57 PM
V
Hey! To fetch an array of reference like images and customize the fields inside, you can do this:‘images’: images[]->{
‘url’: asset.url,
etc.
}
Hope it’s help!
‘url’: asset.url,
etc.
}
Hope it’s help!
May 20, 2023, 3:09 PM
N
Thank you for your response, Valentin. However when i am fetching with your method, it still gives me "null" output in Studio vision:
Query:
Result:
Query:
*[_type == 'page' && slug.current == 'haight-ashbury']{
_id,
_createdAt,
"mainImage": mainImage.asset->url,
"images": images[]->{
'url':asset.url,
}, //I am also querying images array here.
title,
"slug": slug.current,
content,
alt,
}
Result:
images:null
title:HAIGHT-ASHBURY
slug:haight-ashbury
May 20, 2023, 10:18 PM
V
Can you try to remove the
->?
"images": images[] {
'url':asset.url,
}
May 21, 2023, 8:08 AM
V
I’ve tried this on a personal projet and it works! Sorry for the typo at first!:
*[_type == 'work'] { images[] { 'url': asset->url } }
May 21, 2023, 8:11 AM
N
God bless you, Valentin! Now this time, your method worked fine. Thank you!
May 21, 2023, 2:45 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.