Polymorphic relationship nested in block - using join field, queries, etc.

[ejasarevic]

Hi folks,
Tried to figure it out from docs, but couldn't find a way. Please point to existing issue/discussion or something that I am doing wrong.

I am building a website layout with following collections and blocks.

1. When building page, you can select layout variant (1 col, 2 cols, etc.)
2. For 1 col variant, there is field "slot1" where you can add teaser/post
3. For 2 cols variant, there are "slot1" and "slot2" respectively

I want to add logic before any teaser/post is deleted to check if it is referenced in some page in slot1 or slot2.
Tried using something like this in Teaser -> beforeDelete hook, but it fails with
The following path cannot be queried: content.slot1

If "layout variant" blocks are not polymorphic and I use only "Teaser" or "Posts" then it works as expected.

    beforeDelete: [
      async (args) => {
        const { id, req } = args;

        // Check if the teaser item is referenced in other collections (e.g. pages)
        const pages = await req.payload.find({
          collection: 'pages',
          where: {
            "content.slot1": {
              equals: id
            }
          },
        });

         if (pages.length > 0) {
           const errorMessage = `This teaser item cannot be deleted because it is referenced in ${pages.length} Page(s).`;
           throw new Error(errorMessage);
         }
      },
    ],

Pages collection:

export const Pages: CollectionConfig = {
  slug: 'pages',
  access: {
    read: () => true,
  },
  fields: [
   {
     name: 'title',
     type: 'text',
     required: true,
   },
   {
     name: 'content',
     type: 'blocks',
     blocks: [RowLayoutCols1Block, RowLayoutCols2Block],
     required: true,
   }
]
};

Layout block variants (1 col, 2 cols, 3 cols, etc.)

1 col = 100% width

export const RowLayoutCols1Block: Block = {
  slug: 'rowLayoutCols1',
  labels: {
    singular: 'Row Layout 1 col (100%)',
    plural: 'Row Layout 1 col (100%)',
  },
  fields: [
    {
      name: 'slot1',
      type: 'relationship',
      required: true,
      relationTo: ['teaser', 'posts'],
      hasMany: false,
    },
  ],
};

2 cols = 50% 50%, etc.

export const RowLayoutCols2Block: Block = {
  slug: 'rowLayoutCols2',
  fields: [
    {
      name: 'slot1',
      type: 'relationship',
      required: true,
      relationTo: ['teaser', 'posts'],
      hasMany: false,
    },
    {
      name: 'slot2',
      type: 'relationship',
      required: true,
      relationTo: ['teaser', 'posts'],
      hasMany: false,
    },
  ],
};

Teaser collection

export const Teaser: CollectionConfig = {
  slug: 'teaser',
  access: {
    read: () => true,
  },
  fields: [
   {
     name: 'title',
     type: 'text',
     required: true,
   }
]
};

Posts collection

export const Posts: CollectionConfig = {
  slug: 'posts',
  access: {
    read: () => true,
  },
  fields: [
   {
     name: 'title',
     type: 'text',
     required: true,
   }
]
};

Or also with usage of join field in Teaser collection which produces following error:
[error: invalid reference to FROM-clause entry for table "_pages_v"] {

Teaser fields:
        {
          label: 'References',
          fields: [
            {
              label: 'Related pages',
              name: 'relatedPages',
              type: 'join',
              collection: 'pages',
              on: 'content.slot1',
            },
          ]
        }