Can you run GROQ inside a Document Preview?
6 replies
Last updated: May 12, 2022
M
Hi all, anyone ever run some groq inside a document preview? Inside a reference field I need to add a flag to illustrate whether the referenced document also references the current document 🙃.
preview: {
select: {
title: 'title',
subtitle: 'type',
type: 'type',
},
prepare({ title = 'Untitled', type, subtitle }) {
const sub = // groq - does this doc reference the parent doc?;
return {
title,
subtitle: sub,
media: eosIcon,
};
},
},May 11, 2022, 4:47 PM
M
Alternative is creating a custom component. Although achievable its a lot of work for such a small tweak to the default
Any ideas/approaches/help more than welcome, thanks!
arrayof
referencessetup... if I could somehow add the flag to the preview then I can save having to re-invent the wheel!
Any ideas/approaches/help more than welcome, thanks!
May 11, 2022, 4:49 PM
Hey Mark! Previews can't handle async functions, so you won't be able to fetch anything from there. Is the parent referenced on the document? If so, you can select a value from that document using this method.
May 11, 2022, 6:21 PM
M
user M
- thank you soooo much for the pointers there, as ever amazing support!I am so close to having it work perfectly, but, there is potentially one fatal issue.
Working code and how it renders attached... all perfect.
preview: {
select: {
title: 'title',
subtitle: 'type',
type: 'type',
ref: 'relEos.0.relEos',
id: '_id',
},
prepare({ title = 'Untitled', type, subtitle, ref, id }) {
const references = ref ? ref : {};
let bidirectional = false
let refIds;
if(!isEmpty(references)) {
refIds = Object.entries(references).map(([key, value]) => value?._ref);
bidirectional = refIds.includes(id);
}
return {
title,
subtitle: bidirectional ? `${subtitle.toUpperCase()} - Bidirectional` : subtitle.toUpperCase(),
};
},
}ref: 'relEos.0.relEos'in the select I'm limited to the first array item.
Doing
ref: 'relEos'returns an array of all the references but I can't then access the data in those referenced documents without groq.
So hacky pirate me is thinking I can just add 30
ref: 'relEos.0.relEos'to my
selectand then just conditionally process them.
Sensible good dev me is thinking it does indeed require a custom component. I've had a little poke through the source code for the
referencefield and am thinking I could piece together a custom reference component along the lines of this . I've not done much with `part:`'s before. Thoughts or ideas very much appreciated 😊.
May 12, 2022, 10:39 AM
Ah, yeah that is an issue. I think at this point you will need to create a custom preview component, since it'll allow you to create a React component that can handle promises.
May 12, 2022, 5:46 PM
M
You can make custom preview components?! I love Sanity! Thanks for the direction you utter champion 🤘
May 12, 2022, 6:34 PM
Haha, you're welcome! It's a really similar process to creating a custom input component. More on it here .
May 12, 2022, 6:36 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.