Get help on Discord

How to display referenced document titles in Sanity preview subtitle?

2 replies
Last updated: Feb 1, 2021
I’ve been fighting for a few hours with a preview, and I figured I’d check in here. I am creating a grid container that has a content array that will accept references to tools, or to cards. I would like for the preview to show the title, and have a subtitle that shows a few of the referenced tools or cards.
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
        }
    }
}
And here’s the function:

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
    })
}
AI Update

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:

  • content is your array field
  • 0 is the array index
  • tool is the reference field
  • title is 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 prepare function cannot make custom GROQ queries

If you need to show more than a few items, you could either:

  1. Show just the first 3-5 items (usually sufficient for preview purposes)
  2. Add a count field that gets updated when items are added/removed
  3. 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 thread
2 replies
As I had suspected, I was seriously overthinking this. My main man
user A
saved the day on this one, and really helped me to find the solution. It was much simpler than I thought. Thanks a bunch for that, Man!
It’s in the docs, and I wasn’t seeing things clearly.
https://www.sanity.io/docs/previews-list-views
Solution is:

preview: {
    select: {
        title: 'title',
        content0: 'content.0.tool.title',
        content1: 'content.1.tool.title',
        content2: 'content.2.tool.title',
        content3: 'content.3.tool.title',
    },
    prepare({ title, ...content }) {
        const subs = Object.values(content).filter(Boolean);

        return {
            title: `${title}`,
            subtitle: subs.join(', '),
        }
    }
}
Thanks again, Geoff! I really do appreciate it!
It was my pleasure, KJ. I’m glad you got it working and enjoyed our discussion. Truly, though, that was all you. 😄

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?