typescript types don't seem to support nested references

[airtonix]

Using the following contentlayer.config.ts in an attempt to create the following relationship:

erDiagram
    PROPERTY ||--o{ CONTENT-BLOCK : "has many"
    CONTENT-BLOCK ||..|| SIMPLEBLOCK : "contains one of"
    CONTENT-BLOCK ||..|| VIDEOBLOCK : "contains one of"
    CONTENT-BLOCK ||..|| PROPERTYPREVIEWBLOCK : "contains one of"
    PROPERTYPREVIEWBLOCK ||..|| PROPERTY: "refers to one of"

Loading

const HeroBlock = defineNestedType(() => ({
    name: 'Hero',
    fields: {
        title: { type: 'string', },
        subtitle: { type: 'string', },
        url: { type: 'string', },
    }
}))

const SimpleBlock = defineNestedType(() => ({
    name: 'Simple',
    fields: {
        content: { type: 'string', },
    }
}))

const PropertyPreviewBlock = defineNestedType(() => ({
    name: 'PropertyPreview',
    fields: {
        property: { type: 'reference', to: Property },
    }
}))

const VideoBlock = defineNestedType(() => ({
    name: 'Video',
    fields: {
        type: { type: 'string', },
        coordinates: { type: 'list', of: { type: 'number' } }
    }
}))

const GalleryBlock = defineNestedType(() => ({
    name: 'Gallery',
    fields: {
        type: { type: 'string', },
        coordinates: { type: 'list', of: { type: 'number' } }
    }
}))



const ContentBlock = defineNestedType(() => ({
    name: 'ContentBlock',
    fields: {
        content: {
            type: 'nested', 
            of: [HeroBlock, SimpleBlock, PropertyPreviewBlock, VideoBlock, GalleryBlock]
        },
    }
}))



const Property = defineDocumentType(() => ({
    name: 'Property',
    filePathPattern: 'properties/**.md',
    contentType: 'markdown',
    fields: {
        title: { type: 'string' },
        images: { type: 'list', of: Image },
        address: { type: 'nested', of: PropertyAddress },
        type: { type: 'nested', of: PropertyType },
        map: { type: 'json', },
        price: { type: 'number', },
        property_type: { type: 'string'},
        attributes: {  type: 'list', of: PropertyAttribute },
        content: {
            type: 'list', 
            of: ContentBlock
        }
    },
    computedFields: {
        slud: {
            type: 'string',
            resolve: (doc) => doc._raw.sourceFileName.replace(/\.md/, '')
        }
    }
}))

But then I end up with this type error:

and these cli errors:

This error shouldn't have happened. Please consider opening a GitHub issue with the stack trace below here:
https://github.com/contentlayerdev/contentlayer/issues

An unchecked error was produced.

TypeError: Cannot read properties of undefined (reading 'name')
    at IncompatibleFieldDataError.renderLine (file:///home/zenobius/Projects/Mine/Github/netlifycms-nextjs/node_modules/.store/@contentlayer-source-files-npm-0.2.9-325e8923d3/node_modules/@contentlayer/source-files/src/errors/index.ts:353:74)
    at file:///home/zenobius/Projects/Mine/Github/netlifycms-nextjs/node_modules/.store/@contentlayer-source-files-npm-0.2.9-325e8923d3/node_modules/@contentlayer/source-files/src/errors/aggregate.ts:133:31
    at Array.map (<anonymous>)
    at aggregateFetchDataErrors (file:///home/zenobius/Projects/Mine/Github/netlifycms-nextjs/node_modules/.store/@contentlayer-source-files-npm-0.2.9-325e8923d3/node_modules/@contentlayer/source-files/src/errors/aggregate.ts:133:8)
    at next (file:///home/zenobius/Projects/Mine/Github/netlifycms-nextjs/node_modules/.store/@contentlayer-source-files-npm-0.2.9-325e8923d3/node_modules/@contentlayer/source-files/src/errors/aggregate.ts:34:26)
    at Generator.next (<anonymous>)
    at ISuspend.factory (file:///home/zenobius/Projects/Mine/Github/netlifycms-nextjs/node_modules/.store/@effect-ts-system-npm-0.57.5-e58c7bc984/node_modules/@effect-ts/system/_src/Effect/gen.ts:135:28)
    at FiberContext.evaluateNow (file:///home/zenobius/Projects/Mine/Github/netlifycms-nextjs/node_modules/.store/@effect-ts-system-npm-0.57.5-e58c7bc984/node_modules/@effect-ts/system/_src/Fiber/context.ts:1173:51)
    at file:///home/zenobius/Projects/Mine/Github/netlifycms-nextjs/node_modules/.store/@effect-ts-system-npm-0.57.5-e58c7bc984/node_modules/@effect-ts/system/_src/Fiber/context.ts:576:33
    at file:///home/zenobius/Projects/Mine/Github/netlifycms-nextjs/node_modules/.store/@effect-ts-system-npm-0.57.5-e58c7bc984/node_modules/@effect-ts/system/_src/Support/Scheduler/index.ts:15:9

Fiber: #23 (started at: 2022-12-30T23:13:16.209Z) was supposed to continue to:

  a future continuation at packages/@contentlayer/source-files/src/fetchData/index.ts:102:21

Fiber: #23 (started at: 2022-12-30T23:13:16.209Z) Execution trace:

  packages/@contentlayer/source-files/src/errors/aggregate.ts:27:8
  packages/@contentlayer/source-files/src/fetchData/fetchAllDocuments.ts:74:15
  packages/@contentlayer/source-files/src/fetchData/fetchAllDocuments.ts:139:37
  packages/@contentlayer/source-files/src/fetchData/fetchAllDocuments.ts:134:8
  packages/@contentlayer/source-files/src/fetchData/fetchAllDocuments.ts:72:43
  packages/@contentlayer/source-files/src/fetchData/fetchAllDocuments.ts:68:16
  packages/@contentlayer/source-files/src/fetchData/fetchAllDocuments.ts:67:16
  packages/@contentlayer/source-files/src/fetchData/fetchAllDocuments.ts:56:24
  packages/@contentlayer/source-files/src/fetchData/fetchAllDocuments.ts:53:49
  packages/@contentlayer/source-files/src/fetchData/fetchAllDocuments.ts:122:10
  packages/@contentlayer/source-files/src/fetchData/fetchAllDocuments.ts:118:22
  packages/@contentlayer/source-files/src/fetchData/fetchAllDocuments.ts:47:44
  packages/@contentlayer/source-files/src/fetchData/fetchAllDocuments.ts:46:10

Fiber: #23 (started at: 2022-12-30T23:13:16.209Z) was spawned by:

Fiber: #19 (started at: 2022-12-30T23:13:16.208Z) was supposed to continue to: <empty trace>

Fiber: #19 (started at: 2022-12-30T23:13:16.208Z) Execution trace: <empty trace>

Fiber: #19 (started at: 2022-12-30T23:13:16.208Z) was spawned by:

Fiber: #18 (started at: 2022-12-30T23:13:16.207Z) was supposed to continue to: <empty trace>

Fiber: #18 (started at: 2022-12-30T23:13:16.207Z) Execution trace: <empty trace>

Fiber: #18 (started at: 2022-12-30T23:13:16.207Z) was spawned by:

Fiber: #17 (started at: 2022-12-30T23:13:16.198Z) was supposed to continue to: <empty trace>

Fiber: #17 (started at: 2022-12-30T23:13:16.198Z) Execution trace:

  packages/@contentlayer/source-files/src/fetchData/index.ts:54:116
  packages/@contentlayer/utils/src/node/fs.ts:90:15
  packages/@contentlayer/utils/src/node/fs.ts:89:72
  packages/@contentlayer/utils/src/node/fs.ts:89:12
  packages/@contentlayer/utils/src/node/fs.ts:17:10
  packages/@contentlayer/utils/src/node/fs.ts:16:60
  packages/@contentlayer/utils/src/node/fs.ts:16:15
  packages/@contentlayer/utils/src/node/fs.ts:31:27
  packages/@contentlayer/core/src/DataCache.ts:51:31
  packages/@contentlayer/core/src/DataCache.ts:50:17
  packages/@contentlayer/core/src/ArtifactsDir.ts:31:12
  packages/@contentlayer/core/src/cwd.ts:23:43
  packages/@contentlayer/utils/src/node/version.ts:21:15
  packages/@contentlayer/utils/src/node/version.ts:20:10
  packages/@contentlayer/utils/src/node/fs.ts:77:17
  packages/@contentlayer/utils/src/node/fs.ts:76:12
  packages/@contentlayer/utils/src/node/fs.ts:45:22
  packages/@contentlayer/core/src/ArtifactsDir.ts:27:15
  packages/@contentlayer/core/src/DataCache.ts:47:38
  packages/@contentlayer/core/src/DataCache.ts:46:12

Fiber: #17 (started at: 2022-12-30T23:13:16.198Z) was spawned by:

Fiber: #1 (started at: 2022-12-30T23:13:15.989Z) was supposed to continue to: <empty trace>

Fiber: #1 (started at: 2022-12-30T23:13:15.989Z) Execution trace:

  packages/@contentlayer/core/src/cwd.ts:23:43
  packages/@contentlayer/core/src/generation/generate-dotpkg.ts:82:13
  packages/@contentlayer/core/src/generation/generate-dotpkg.ts:78:16
  packages/@contentlayer/cli/src/commands/BuildCommand.ts:26:14
  packages/@contentlayer/cli/src/commands/BuildCommand.ts:25:91
  packages/@contentlayer/cli/src/commands/BuildCommand.ts:25:12
  packages/@contentlayer/core/src/getConfig/index.ts:42:18
  packages/@contentlayer/core/src/getConfig/index.ts:41:10
  packages/@contentlayer/core/src/getConfig/esbuild.ts:47:15
  packages/@contentlayer/core/src/getConfig/esbuild.ts:39:26
  packages/@contentlayer/core/src/getConfig/esbuild.ts:37:12
  packages/@contentlayer/core/src/getConfig/esbuild.ts:117:12
  packages/@contentlayer/core/src/getConfig/esbuild.ts:75:36
  packages/@contentlayer/core/src/getConfig/index.ts:198:13
  packages/@contentlayer/core/src/getConfig/index.ts:187:28
  packages/@contentlayer/core/src/getConfig/index.ts:185:44
  packages/@contentlayer/core/src/getConfig/index.ts:172:28
  packages/@contentlayer/core/src/getConfig/index.ts:170:31
  packages/@contentlayer/core/src/getConfig/index.ts:157:28
  packages/@contentlayer/core/src/getConfig/index.ts:155:15
  packages/@contentlayer/core/src/getConfig/index.ts:152:15
  packages/@contentlayer/core/src/getConfig/index.ts:151:15
  packages/@contentlayer/core/src/cwd.ts:23:43
  packages/@contentlayer/core/src/getConfig/index.ts:136:27
  packages/@contentlayer/core/src/getConfig/index.ts:123:10

Fiber: #1 (started at: 2022-12-30T23:13:15.989Z) was spawned by: <empty trace>

OS: linux 5.19.15-201.fc36.x86_64 (arch: x64)
Process: /home/zenobius/.asdf/installs/nodejs/16.17.0/bin/node /home/zenobius/Projects/Mine/Github/netlifycms-nextjs/node_modules/.store/contentlayer-npm-0.2.9-5fadd70b6f/node_modules/contentlayer/bin/cli.cjs build
Node version: v16.17.0
Contentlayer version: 0.2.9

[airtonix]

I think part of the problem is that I'm trying to use netlifycms variable list widget and contentlayer doesn't seem to support that.

:(

[airtonix]

example netlifycms config:

x-shared:
  content_blocks:

    - &field_content_block_simple
      name: Block
      label: Simple Block
      type: object
      fields:
        - name: content
          label: Content
          widget: markdown

    - &field_content_block_hero
      name: Hero
      label: Hero Block
      type: object
      fields:
        - name: title
          label: Title
          widget: string
        - name: subtitle
          label: Sub Title
          required: false
          widget: string
        - name: content
          label: Content
          required: false
          widget: string
        - name: url
          label: Url
          required: false
          widget: string

    - &field_content_block_property
      name: PropertyPreview
      label: Property Preview
      type: object
      fields:
        - name: property
          widget: relation
          collection: properties
          value_field: title
          display_fields: [title, address.city, address.suburb]
          search_fields:
            [title, address.suburb, address.city, address.country]

    - &field_content_block_video
      name: Video
      label: Video
      type: object
      fields:
        - name: url
          widget: string

    - &field_content_block_gallery
      name: Gallery
      label: Gallery
      type: object
      fields:
        - name: title
          label: Title
          widget: string

        - label: Images
          name: images
          widget: image
          choose_url: true
          required: false
          media_library:
            config:
              multiple: true


collections:
  - name: properties
    label: Properties
    label_singular: Property
    folder: content/properties
    slug: "{{title}}"
    create: true
    fields:
      - name: content
        label: Content
        widget: list
        types:
          - *field_content_block_simple
          - *field_content_block_hero
          - *field_content_block_video
          - *field_content_block_gallery

[airtonix]

actually, i just saw #297 :> looks like i had it setup wrong or i didn't pay close enough attention to the typescript errors when experimenting:

const Property = defineDocumentType(() => ({
  name: "Property",
  filePathPattern: "properties/**.md",
  contentType: "markdown",
  fields: {
    title: { type: "string" },
    images: { type: "list", of: Image },
    address: { type: "nested", of: PropertyAddress },
    type: { type: "nested", of: PropertyType },
    map: { type: "json" },
    price: { type: "number" },
    property_type: { type: "string" },
    attributes: { type: "list", of: PropertyAttribute },
    content: {
      type: "list",
      of: [HeroBlock, SimpleBlock, GalleryBlock, VideoBlock],
    },
  },
}));

works, but predictably, when i add in PropertyPreviewBlock to that content list, the types throw again.

It doesn't make sense that your reference types are recursive but the runtime behaviour is that it only returns a string reference.

[drkstr101]

Is it possible to resolve these references with computed fields named the same as the reference field?

[airtonix]

no because you can only access the current document type in computed fields. It won't be garunteed that the other document types have been generated.

I tried and the other document type collection ends up as undefined

[airtonix]

I'm currently working around this by creating fake fields that mirror the entire structure of the other document.

then at ssg or ssr time, right before i give the document to the react component in nextjs via getStaticProps or getInitialProps i do some gluing there, since i know at that point all my document type collections exist.

An ideal solution here would be contentlayer/client should expose some kind of factory that takes all the collections and abstracts away all the gluing up of the fields:

import * as generated from '.contentlayer/generated';
import { MakeMagic } from 'contentlayer/client';

export const content = MakeMagic(generated)


const bedsAttribute = content.allPropertyAttributes.getByTitle('Beds')
const firstProperty = content.allProperties.getByIndex(0)

assert(bedsAttribute.id === firstProperty.attributes[0].id)

[drkstr101]

Thanks for the tip! The suggested workaround will work for us (IE., to manually resolve refs in getStaticProps).

Cheers, and thanks again for your time!!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.