Why Doesn't Prepare Render Properly in Sanity.IO

Question

I am trying to customize the prview section for a document insanity.io. To that extent, I have created the following document:

export default {
  name: 'news',
  type: 'document',
  title: 'News',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    ...
    {
      name: 'author',
      title: 'Author',
      type: 'string',
    },
    ...
  ],
  preview: {
    select: {
      title: 'title',
      subtitle: 'author',
    }
  }
}

This works exactly as I want in Studio. The title section in the preview pane shows the title of the document and the subtitle section shows the name of the author.

However, if I try to modify the output of author by using prepare, then it no longer works. For instance, take a look at the following variation of the same document:

export default {
  name: 'news',
  type: 'document',
  title: 'News',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    ...
    {
      name: 'author',
      title: 'Author',
      type: 'string',
    },
    ...
  ],
  preview: {
    select: {
      title: 'title',
      author: 'author',
    }
  },
  prepare(selection) {
    const { author } = selection
    return {
      ...selection,
      subtitle: author && `${author} is the author`
    }
  }
}

The title preview field is rendered, but nothing shows up in the subtitle section. However, as far as I understand -- this should work. And I wondering why not.

Any ideas?

Answer 1

prepare is actually a function called in preview. You have it as a seperate field of the root object. Move prepare inside preview like so:

preview: {
  select: {
    title: 'title',
    author: 'author'
  },
  prepare(selection) {
    const { author } = selection
    return {
      ...selection,
      subtitle: author && `${author} is the author`
    }
  }
}