How to display referenced document titles in Sanity preview subtitle?
I have created a function that returns the correct values, but it doesn’t actually work in the preview because the return is an object. It’s also really gross, and I think that there has to be a better way to do this, and I am hopeful that someone can help me to find it.
Here’s the preview:
preview: {
select: {
title: 'title',
content: 'content'
},
prepare({ title, content }) {
const subs = previewReference(content)
console.log('subs: ', subs)
return {
title: `${title}`,
subtitle: subs
}
}
}export const previewReference = async(content) => {
const query = `*[_type == "tool"]{ _id, title }`
return await client.fetch(query)
.then(doc => {
const ids = []
doc.map(id => ids.push(id))
return ids
})
.then(ids => {
const filteredArray = []
content.filter((value, i) => {
const helper = value.tool._ref
ids.filter(id => {
const eyeDee = id._id
if (eyeDee === helper) {
console.log("Got one! ", id.title)
filteredArray.push(id.title)
}
})
});
console.log('filteredArray: ', filteredArray)
return filteredArray
})
}I see your issue! The problem is that you're trying to use an async function in the prepare function, but prepare doesn't support async operations or custom GROQ queries. The good news is that Sanity's preview system has a built-in way to dereference fields from referenced documents that's much simpler than what you're attempting.
Instead of fetching data in the prepare function, you can use dot notation in the select object to directly access fields from referenced documents. Here's how to fix your preview:
preview: {
select: {
title: 'title',
// Dereference the first few items in the content array
item0Title: 'content.0.tool.title', // First tool's title
item0Card: 'content.0.card.title', // First card's title (if it's a card instead)
item1Title: 'content.1.tool.title', // Second tool's title
item1Card: 'content.1.card.title',
item2Title: 'content.2.tool.title', // Third tool's title
item2Card: 'content.2.card.title'
},
prepare({ title, item0Title, item0Card, item1Title, item1Card, item2Title, item2Card }) {
// Collect all the titles that exist
const subtitles = [
item0Title || item0Card,
item1Title || item1Card,
item2Title || item2Card
].filter(Boolean); // Remove undefined values
return {
title: title,
subtitle: subtitles.length > 0 ? subtitles.join(', ') : 'No items'
}
}
}The key insight here is that you can access fields from references using the syntax 'content.0.tool.title' where:
contentis your array field0is the array indextoolis the reference fieldtitleis the field from the referenced document
This works because Sanity's preview system automatically dereferences these paths for you - no need for custom GROQ queries or async functions.
Important limitations:
- You can only access a fixed number of array items (using numeric indices like
0,1,2) - You cannot loop through all items dynamically in the preview
- The
preparefunction cannot make custom GROQ queries
If you need to show more than a few items, you could either:
- Show just the first 3-5 items (usually sufficient for preview purposes)
- Add a count field that gets updated when items are added/removed
- Consider if you really need to show all items in a preview - the goal is just to help editors identify the document
This approach is much cleaner than your original function and works synchronously within Sanity's preview system. The official documentation on previews has more examples of dereferencing with dot notation, and there's a great guide on creating richer array item previews that might give you additional ideas.
Show original thread2 replies
Was this answer helpful?
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.
