Get help on Discord

Troubleshooting a gallery block error in a page builder

14 replies
Last updated: Apr 1, 2020
hi all, currently trying to make a page builder for a client, i’m trying to make a gallery block for them that contains an object with a caption, alt text and the image. When i try add this block, i get this error:

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

Is there a way around the array of arrays?
AI Update

The error you're seeing — Invalid item type: "[object Object]". Default array input can only contain objects (for now) — typically happens when you're trying to nest an array inside another array, which the default array input doesn't support directly.

For a page builder gallery block, you probably have something like this structure that's causing the issue:

// ❌ This won't work - array inside array
{
  name: 'gallery',
  type: 'array',
  of: [
    {
      type: 'array', // <- Problem: nested array
      of: [
        {
          type: 'object',
          fields: [
            {name: 'image', type: 'image'},
            {name: 'caption', type: 'string'},
            {name: 'alt', type: 'string'}
          ]
        }
      ]
    }
  ]
}

The solution is to wrap your gallery in an object type first, then have the array of images inside that object:

// ✅ This works - object containing an array
{
  name: 'pageBuilder',
  type: 'array',
  of: [
    {
      name: 'gallery',
      type: 'object',
      fields: [
        {
          name: 'images',
          type: 'array',
          of: [
            {
              type: 'object',
              fields: [
                {name: 'image', type: 'image'},
                {name: 'caption', type: 'string'},
                {name: 'alt', type: 'string'}
              ]
            }
          ]
        }
      ]
    }
    // ... other page builder blocks
  ]
}

This structure gives you a page builder array that contains gallery block objects, and each gallery object has its own array of image objects with captions and alt text.

If you want to make the gallery block reusable across your schema, you can define it as a separate schema type:

// schemas/galleryBlock.js
export default {
  name: 'galleryBlock',
  type: 'object',
  title: 'Gallery',
  fields: [
    {
      name: 'images',
      type: 'array',
      of: [
        {
          type: 'object',
          fields: [
            {name: 'image', type: 'image'},
            {name: 'caption', type: 'string'},
            {name: 'alt', type: 'string'}
          ]
        }
      ]
    }
  ]
}

Then reference it in your page builder:

{
  name: 'pageBuilder',
  type: 'array',
  of: [
    {type: 'galleryBlock'},
    // other blocks...
  ]
}

The key takeaway from the array fields documentation is that arrays can contain objects or references, but when you need nested arrays, you must wrap them in an object type first. This is the standard pattern for page builder implementations where you need complex, nested content structures.

Hi Ste! This is to guard against multidimensional arrays until they get proper support. Wrapping the nested array in an 
object
type should give you a way around it. Let me know if you need some help with this — if so, it would be helpful if you could share the gallery code 👍
Thank you
user M
, i’ve tried the nested object but it only seems to let me create 1 image for a 
gallery
block!
here is my code for the 2 parts
export default {
  title: "Gallery",
  name: "gallery",
  type: "object",
  fields: [
    {
      name: "image",
      title: "Image",
      type: "array",
      of: [{ type: "galleryImage" }],
    },
  ],
}
export default {
  name: "galleryImage",
  type: "object",
  title: "Gallery Image",
  fields: [
    { name: "caption", type: "string", title: "Caption" },
    { name: "mainImage", type: "image", title: "Image" },
  ],
}
then at the top level, we just have this
export default {
  name: "pageBuilder",
  type: "array",
  title: "Content",
  of: [
    {
      name: "header",
      type: "header",
      title: "Header",
    },
    {
      name: "landingHeader",
      type: "landingHeader",
      title: "Landing Header",
    },
    {
      name: "images",
      type: "galleryImage",
      title: "Gallery",
    },
  ],
}
Try replacing 
galleryImage
by 
gallery
in your 
pageBuilder
array 🙂
Ahhhh unsure how I missed that!!
thank you sosososoosso much!
It’s all that inception stuff clouding our minds: an object inside an array inside an object inside an array 😉 Good to go!
Content added! For this new field to show in my Gatsby schema, do I need a graphql deploy again? A sanity deploy doesn’t seem to have updated it
That’s right: any time you make changes to your schema, you’ll need to run 
sanity graphql deploy
to update your GraphQL API. The alternative to this is using GROQ instead, but GraphQL makes sense for Gatsby 👍
wonderful! will give it a go now 🙂

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.

Get started for freeExplore the demo

Was this answer helpful?