Unlock seamless workflows and faster delivery with our latest releases- get the details

Need help with creating a grid container preview in Slack thread.

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

Was this answer helpful?