Unhelpful error message when defining an array of arrays

[bjoerge]

Defining an array of arrays triggers this rather unhelpful error in the Array input:

Uncaught Error: Invalid item type: "[object Object]". Default array input can only contain objects (for now)

Until we get proper support for arrays of arrays, this should be a more instructive (and also a hard failure) at schema parse time.

Example schema definition:

{
  name: 'testcase',
  type: 'document',
  title: 'Array of array test',
  fields: [
    {
      name: 'arrayOfArray',
      title: 'Array of array',
      type: 'array',
      of: [
        {
          type: 'array',
          of: [{type: 'string'}]
        }
      ]
    }
  ]
}

[garethky]

Yep, just ran into this. Even just "Invalid item "Item Name" type: "actualTypeName" is itself an array. Default array input can only contain objects (for now).

[doublejosh]

Same. Very lame. This is a major miss for Sanity.

Creating an array of portableText arrays... is a core feature of any decent CMS.

[doublejosh]

Looks like you can stuff a portable text or block array inside an object, and have an array of those objects from the document level. Not the worst work-around, but there may be some trouble with the fetching/rendering...

sanity-io/gatsby-source-sanity#37

[LinnJS]

I was having this same issue when building a site with a Page builder. Since every page is an array I need to nest an array of objects inside the page array for stuff like content grid implementations.

After reading the above comments I went ahead and made the grid an object with a heading then an array of gridItems seemed to work. Although this is not what I wanted on the first draft it feels like the best shape now that I am looking at it. Can just always take an optional title and render it for screen readers if the design/marketing team does not want the section heading.

Here is the schema that is working for me and feels pretty nice for my use case.

export default {
  type: 'object',
  name: 'gridSection',
  title: 'Grid Section',
  fields: [
    {
      type: 'string',
      title: 'Grid Heading',
      name: 'heading',
    },
    {
      type: 'array',
      title: 'Grid items',
      name: 'gridItems',
      of: [
        {
          type: 'object',
          title: 'Grid Item',
          name: 'gridItem',
          fields: [
            {
              type: 'string',
              title: 'Item Heading',
              name: 'heading',
            },
            {
              type: 'image',
              title: 'Icon',
              name: 'icon',
            },
          ],
        },
      ],
    },
  ],
  preview: {
    select: {
      title: 'heading',
    },
    prepare({ title }: { title: string }) {
      return {
        title,
      };
    },
  },
};