Preview a reference

Question

I want to preview a reference name in the studio I have and icon type, for example one which has the title 'facebook'

export default {
name: 'icon',
title: 'Icon',
type: 'document',
fields: [
    {
        name: 'name',
        title: 'Name',
        type: 'string'
    },
]

}

I reference this in a menu elsewhere like this

{
        name: 'icon',
        title: 'Icon',
        type: 'reference',
        to: [{ type: 'icon' }]
    },

and then try to preview like this

preview: {
    select: {
        title: 'icon',
    },
    prepare(selection) {
        const { title } = selection;

        return {
            title: title.name,
        }
    }
}

but my selection returns the reference object, with _ref etc. not the object itself. Is there a way to preview this reference?

Answer 1

You can dot your way into the property on the reference that you'd like to use in the preview like this:

preview: {
    select: {
        title: 'icon.name',
    },
    prepare(selection) {
        const { title } = selection;

        return {
            title: title.name,
        }
    }
}

Side note: Since the prepare function now just passes through its input, you can remove it altogether. This would be sufficient:

preview: {
    select: {
        title: 'icon.name'
    }
}