How to Wrap Nested Arrays in Objects

4 replies
Last updated: Jul 16, 2020
I'm reading about this limitation with
array
types

Due to a limitation in the data store, arrays may not currently contain arrays. Wrap nested arrays in objects.
Does anyone have an example of wrapping nested arrays in objects? I'm not quite sure I understand how that would be setup.
AI Update

The limitation about arrays not containing arrays is a data store constraint in Sanity, and the workaround is actually pretty straightforward! Instead of nesting an array directly inside another array, you wrap the inner array in an object type.

Here's a practical example to illustrate this:

❌ This won't work (array directly inside array):

{
  name: 'categories',
  type: 'array',
  of: [
    {
      type: 'array', // This is not allowed!
      of: [{type: 'string'}]
    }
  ]
}

βœ… This will work (wrap the inner array in an object):

{
  name: 'categories',
  type: 'array',
  of: [
    {
      type: 'object',
      name: 'categoryGroup',
      fields: [
        {
          name: 'items',
          type: 'array', // Now the array is inside an object
          of: [{type: 'string'}]
        }
      ]
    }
  ]
}

Here's a more real-world example - let's say you want to create a FAQ section where each category has multiple questions:

{
  name: 'faqSection',
  type: 'array',
  title: 'FAQ Categories',
  of: [
    {
      type: 'object',
      name: 'faqCategory',
      fields: [
        {
          name: 'categoryName',
          type: 'string',
          title: 'Category Name'
        },
        {
          name: 'questions',
          type: 'array', // This array is wrapped in the object above
          title: 'Questions',
          of: [
            {
              type: 'object',
              fields: [
                {name: 'question', type: 'string'},
                {name: 'answer', type: 'text'}
              ]
            }
          ]
        }
      ]
    }
  ]
}

The key insight is that the data store limitation prevents array β†’ array directly, but it's perfectly fine to do array β†’ object β†’ array. The object acts as a container that gives the inner array its own scope. This also has the benefit of letting you add additional fields alongside your nested array, which often makes your content model more flexible anyway!

When you query this data with GROQ, you'll just need to account for the object wrapper in your query path, but otherwise it works exactly as you'd expect. You can learn more about array fields and object types in the Sanity documentation.

Figured it out! This ties back to my question from yesterday
Since you can't nest arrays within arrays, I needed to wrap things with an extra layer to get the "page builder" effect I was looking for.
First, I created this schema which has the types I want to allow in my page builder
export default {
	name: 'clusterItems',
	type: 'array',
	title: 'Cluster Items',
	of: [
		{
			type: 'image'
		},
		{
			type: 'video'
		},
		{
			type: 'textContent'
		}
	]
};
Then I created this schema which I use in the actual editor

export default {
	name: 'cluster',
	type: 'object',
	title: 'Cluster',
	fields: [
		{
			name: 'items',
			type: 'clusterItems',
			title: 'Items'
		}
	]
};
Thanks for sharing back the examples Mark, really appreciated πŸ‘

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?