Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences →

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...

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

Jan 31, 2021, 2:02 AM

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!

Feb 1, 2021, 3:49 AM

It was my pleasure, KJ. I’m glad you got it working and enjoyed our discussion. Truly, though, that was all you. 😄

Feb 1, 2021, 4:18 PM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.