Preview conf with referenced doc

preview-schema.js

export default createSchema({
  // We name our schema
  name: 'default',
  // Then proceed to concatenate our document type
  // to the ones provided by any plugins that are installed
  types: schemaTypes.concat([
    {
      name: 'frontpage',
      type: 'document',
      title: 'Frontpage',
      fields: [
        {
          name: 'title',
          type: 'string',
        },
        {
          name: 'layouts',
          type: 'layouts',
        },
      ],
      preview: {
        select: {
          // this lets you access the title in the referenced
          articleInFirstLayoutTitle: 'layouts.0.article.title',
          articleImage: 'layouts.0.article.image',
        },
        prepare(selection) {
          console.log({ selection });
          const {
            // articleInFirstLayout,
            articleInFirstLayoutTitle,
            articleImage,
          } = selection;
          return {
            title: articleInFirstLayoutTitle, // undefined
            media: articleImage, // undefined
          };
        },
      },
    },
    {
      name: 'layouts',
      type: 'array',
      of: [
        {
          type: 'layout',
        },
      ],
    },
    {
      name: 'layout',
      type: 'object',
      fields: [
        {
          name: 'title',
          type: 'string',
        },
        {
          name: 'article',
          type: 'reference',
          to: [{ type: 'article' }],
        },
      ],
    },
    {
      name: 'article',
      type: 'document',
      title: 'Article',
      fields: [
        {
          name: 'title',
          type: 'string',
        },
        {
          name: 'image',
          type: 'image',
        },
      ],
    },
  ]),
});