Get help on Discord

SOLVED: Preview setup wrong in referenced type

3 replies
Last updated: Mar 22, 2023
I am having this issue, can someone please take a look and let me know what I could possibly have done wrong? I already checked for all the spellings and potential hidden special characters, I will attach some more references in the comment sections


SOLVED - leaving this here for anyone with similar issues, it looks like my setup for preview in the referenced type is wrong, I fixed it and it is working now
AI Update

Great to hear you solved it! For anyone else who stumbles upon this thread with similar issues, it sounds like the problem was related to preview configuration in a referenced document type.

This is a common gotcha in Sanity schemas. When you're working with references and trying to display them in the Studio (like in arrays, reference inputs, or search results), each referenced document type needs its own preview configuration defined in its schema.

A typical fix looks like this:

export default {
  name: 'author',
  type: 'document',
  fields: [
    {name: 'name', type: 'string'},
    {name: 'image', type: 'image'},
  ],
  preview: {
    select: {
      title: 'name',
      media: 'image'
    }
  }
}

Common issues that cause preview problems:

  • Missing preview object entirely on the referenced type
  • Incorrect field paths in the select object
  • Typos in field names (which you already checked!)
  • Using prepare() function with incorrect return values

If you're still learning about previews, the Sanity documentation on previews covers all the details about select, prepare, and how to customize what shows up in the Studio UI.

Thanks for updating the thread with your solution - this kind of post helps the community a lot! 🙌

Show original thread
3 replies
import {defineField, defineType} from 'sanity'
import {MdAttachFile as icon} from 'react-icons/md'

export default defineType({
  name: 'publication',
  title: 'Publication',
  type: 'document',
  icon,
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 100,
      },
    }),
    defineField({
      name: 'truckIdentifiers',
      title: 'Truck Identifiers',
      type: 'array',
      of: [
        {
          type: 'reference',
          to: [
            {
              type: 'truckIdentifier',
            },
          ],
        },
      ],
    }),
    defineField({
      name: 'releaseDate',
      title: 'Release date',
      type: 'datetime',
    }),
    defineField({
      name: 'overview',
      title: 'Overview',
      type: 'blockContent',
    }),
    defineField({
      name: 'featuredImage',
      title: 'Featured Image',
      type: 'image',
      options: {
        hotspot: true,
      },
    }),
  ],
  preview: {
    select: {
      title: 'title',
      date: 'releaseDate',
      media: 'poster',
      // castName0: 'castMembers.0.person.name',
      // castName1: 'castMembers.1.person.name',
      // truckIdentifier0: 'truckIdentifiers.0.truckIdentifier.name',
    },
    prepare(selection) {
      const year = selection.date && selection.date.split('-')[0]
      // const Identifiers = [selection.truckIdentifier0].filter(Boolean).join(', ')

      return {
        title: `${selection.title} ${year ? `(${year})` : ''}`,
        date: selection.date,
        // subtitle: Identifiers,
        media: selection.media,
      }
    },
  },
})
import {defineField, defineType} from 'sanity'
// import {MdPerson as icon} from 'react-icons/md'

export default defineType({
  name: 'truckIdentifier',
  title: 'Truck Identifier',
  type: 'document',
  // icon,
  fields: [
    defineField({
      name: 'name',
      title: 'Identifier Name',
      type: 'string',
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'name',
        maxLength: 100,
      },
    }),
    defineField({
      name: 'image',
      title: 'Image',
      type: 'image',
      options: {
        hotspot: true,
      },
    }),
    defineField({
      name: 'truckModels',
      title: 'Truck Models',
      type: 'array',
      of: [
        {
          type: 'reference',
          to: [
            {
              type: 'truckModel',
            },
          ],
        },
      ],
    }),
  ],
  preview: {
    select: {
      title: 'name',
      subtitle: 'truckModels[0].name',
      media: 'image',
    },
  },
})
Thanks for sharing your solution!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?