Get help on Discord

GROQ Query Response - Making a Separate Property the Property an Object

9 replies
Last updated: Oct 6, 2021
I'm having trouble with a query. Not sure if what I'd like to do is possible.
The query:

*[_type == "post"][0] {
  	mainImage,
    "lqip": mainImage.asset->metadata.lqip
}
returns:

{
  "lqip": "data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBw...",
  "mainImage": {
    "_type": "image",
    "altText": "Mountains with pink sky and turquoise water",
    "asset": {
      "_ref": "image-db89f238f31f609d2cac163248de2105d4c1f06c-3374x2000-jpg",
      "_type": "reference"
    }
  }
}
I'd like 
lqip
to be a property of the 
mainImage
object:
{
  "mainImage": {
    "_type": "image",
    "altText": "Mountains with pink sky and turquoise water",
    "lqip": "data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBw...",
    "asset": {
      "_ref": "image-db89f238f31f609d2cac163248de2105d4c1f06c-3374x2000-jpg",
      "_type": "reference"
    }
  }
}
Is there a way to achieve this?
Oct 6, 2021, 1:13 AM
Could you try:

*[_type == 'post'][0]{
  mainImage{
  	...,
  	'lqip': ^.mainImage.asset->metadata.lqip,
  }
}
Oct 6, 2021, 1:18 AM
Hey Geoff, I'll give it a try.
Oct 6, 2021, 1:19 AM
Just getting on a computer to check this.
Oct 6, 2021, 1:20 AM
Just tried and it works perfectly.
Oct 6, 2021, 1:20 AM
Thanks very much Geoff. Still getting my mind wrapped around these kinds of queries. Really appreciate the help.
Oct 6, 2021, 1:21 AM
This should do the same and removes some complexity:

*[_type == 'post'][0]{
  mainImage{
  	...,
  	'lqip': asset->metadata.lqip,
  }
}
Oct 6, 2021, 1:21 AM
Oh cool, I'll try it.
Oct 6, 2021, 1:22 AM
You’re welcome! Yes, they can get complex but are sure powerful. It’s fun when you try a query and it works. 🙂
Oct 6, 2021, 1:22 AM
Definitely! Yeah that one is simpler and intuitive. Works perfectly.
Oct 6, 2021, 1:23 AM

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?