Delegate schema preview to field's preview in Sanity

Great question! Unfortunately, there isn't a built-in way to directly "delegate" or reuse the preview configuration from a referenced document type in Sanity. Each schema type needs to define its own preview logic.

However, you have a few practical approaches to solve this without duplicating code:

1. Dereference fields in select (simplest approach)

You can access fields from referenced documents using dot notation in your select object. This is covered in the preview configuration docs:

preview: {
  select: {
    title: 'title',
    artistName: 'artist.name',
    artistImage: 'artist.image'
  },
  prepare({ title, artistName, artistImage }) {
    return {
      title: title,
      subtitle: `by ${artistName}`,
      media: artistImage
    }
  }
}

This lets you pull specific fields from the Artist document, but you're manually choosing which fields to display rather than reusing the entire preview logic.

2. Extract shared preview logic into a helper function

If you want to reuse the same preview logic across multiple schema types, create a shared function:

// previewHelpers.js
export const artistPreviewConfig = {
  select: {
    name: 'name',
    image: 'image'
  },
  prepare({ name, image }) {
    return {
      title: name,
      media: image
    }
  }
}

// artist.js
export default {
  name: 'artist',
  type: 'document',
  preview: artistPreviewConfig
}

// song.js - reuse for the artist field
export default {
  name: 'song',
  type: 'document',
  preview: {
    select: {
      title: 'title',
      artistName: 'artist.name',
      artistImage: 'artist.image'
    },
    prepare({ title, artistName, artistImage }) {
      return {
        title: title,
        subtitle: artistName,
        media: artistImage
      }
    }
  }
}

3. Custom preview component (most flexible)

For more complex scenarios, you can create a custom preview component using React. This gives you full control over rendering, though it's more work:

const CustomPreview = (props) => {
  return props.renderDefault({
    ...props,
    title: props.schemaType?.title,
    // custom logic here
  })
}

export default {
  name: 'song',
  components: {
    preview: CustomPreview
  }
}

The reality

As discussed in this community thread, there's no way to truly "delegate" to another type's preview and automatically inherit its media/icon logic. You'll need to implement the logic yourself, either by dereferencing specific fields or creating shared helper functions.

The dereferencing approach (option 1) is usually the most practical - it's simple, doesn't require extra abstractions, and works well for most use cases where you just want to show some info about the referenced document.