Access document-level data within the preview, select & prepare?

[aaronbentley]

Hey y'all 👋

I'm taking Sanity v3 out for a test drive, is it possible to access object-level data within the preview, select & prepare section, here's a pseudo- code example of what I'm trying to do:

import { defineField, defineType } from 'sanity'

export const Splash = defineType({
    name: 'splash',
    title: 'Splash', // <-- This is the value I want to retrieve in the preview : { select {} } below
    type: 'object',
    fields: [
        defineField({
            name: 'title',
            title: 'Title',
            type: 'string'
        })
    ],
    preview: {
        select: {
            type: 'type.title',  // pseudo-code for demo purposes
            title: 'title'
        },
        prepare({ title, type }) {
            return {
                title: `[${type}] ${title}`
            }
        }
    }
})

I can create the name outside of the type and field definitions and reference it that way, I just wondered if there's a way to access the top-level object type data within the select object.

[bryandowning]

@aaronbentley This appears to be possible if you define your preview config outside the type:

import { defineField, defineType, PreviewConfig } from 'sanity'

const preview: PreviewConfig = {
    select: {
        title: 'title'
    },
    prepare({ title }) {
        return {
            title: `[${Splash.title}] ${title}`
        }
    }
}

export const Splash = defineType({
    name: 'splash',
    title: 'Splash',
    type: 'object',
    fields: [
        defineField({
            name: 'title',
            title: 'Title',
            type: 'string'
        })
    ],
    preview
})

[aaronbentley]

Thanks for chiming in @bryandowning 🙌

The solution you proposed certainly did work, although I opted to go with my initial solution, as I can reference the string (contentType) wherever needed, such as field descriptions, validation warnings, errors etc...

import { defineField, defineType } from 'sanity'

// Define content type explicitly here
const contentType = 'Splash'

export const Splash = defineType({
    name: contentType.toLowerCase(),
    title: contentType,
    type: 'object',
    fields: [
        defineField({
            name: 'title',
            title: 'Title',
            type: 'string',
            description: `${contentType} Title`,
            validation: (Rule) => Rule.required(`Specify ${contentType} Title`)
        }),
    ],
    preview: {
        select: {
            title: 'title'
        },
        prepare: ({ title = '' }) => ({
            title: `[${contentType}] ${title}`
        })
    }
})

... which was inspired by the following Sanity documentation.

[bryandowning]

Right, yeah, makes sense!