Anonymous inline object error in image array for graphql deploy

8 replies
Last updated: Aug 14, 2020
Hi,
Schema problem. I’m trying to do a ‘graphql deploy’ but get a “Encountered anonymous inline object “image” for field/type “imageArray”. I’ve already defined other fields as a global schema type, but I can’t get this image array to work.

Main file

...
        {
            title: "Other Images",
            name: "imageArray",
            type: "imageArray",
        },
...
imageArray.js

export default {
    name: 'imageArray',
    type: 'array',
    title: 'More Images',
    of: [
        {
            type: 'image',
            options: {
                metadata: ['lqip', 'palette']
            },
            fields: [
                {
                    title: 'Caption',
                    name: 'caption',
                    type: 'string',
                    options: {
                        isHighlighted: true
                    }
                },
                {
                    title: 'Alternative text',
                    name: 'alt',
                    type: 'string',
                    options: {
                        isHighlighted: true
                    }
                },
            ]

        },
    ]
}
Can anyone see what I’m doing wrong, please?
AI Update

The issue is that GraphQL requires all object types to have explicit names, and you're using an inline anonymous object inside your array definition. Even though you've defined imageArray as a named type, the image object inside the of array is anonymous because you're adding custom fields to it inline.

Here's how to fix it - you need to extract the image object into its own named type:

Create a new file imageWithMetadata.js (or similar):

export default {
  name: 'imageWithMetadata',
  type: 'image',
  title: 'Image with Metadata',
  options: {
    metadata: ['lqip', 'palette']
  },
  fields: [
    {
      title: 'Caption',
      name: 'caption',
      type: 'string',
      options: {
        isHighlighted: true
      }
    },
    {
      title: 'Alternative text',
      name: 'alt',
      type: 'string',
      options: {
        isHighlighted: true
      }
    }
  ]
}

Then update your imageArray.js to reference this named type:

export default {
  name: 'imageArray',
  type: 'array',
  title: 'More Images',
  of: [
    {
      type: 'imageWithMetadata'
    }
  ]
}

Don't forget to add the new type to your schema:

Make sure you import and include imageWithMetadata in your schema configuration where you define all your types.

The key principle here is explained in the Sanity documentation on lifting anonymous object types: GraphQL (and other features like copy/paste) require all object types to have explicit names. Whenever you're adding custom fields to a built-in type like image, you need to define it as a separate named schema type rather than inline.

Show original thread
8 replies
Is your imageArray added to your schema.js file?
Hi User,
Yes,

import createSchema from 'part:@sanity/base/schema-creator'
import schemaTypes from 'all:part:@sanity/base/schema-type'
import siteSettings from './siteSettings'
import product from './product'
import mainImage from './mainImage'
import imageArray from './imageArray'
import review from './review'
import globalVariables from './globalVariables'

export default createSchema({
    name: 'mySchema',
    types: schemaTypes.concat([
        siteSettings,
        product,
        mainImage,
        imageArray,
        review,
        globalVariables
    ])
})

user T
Any idea, please?
I think what’s causing a problem is the type “array”. Try this instead:
export default {
  name: 'mainImage',
  type: 'image',
  title: 'Image',
  fields: [
    { ... }
  ],
}
And in your document you can do a reference, something like this

    {
      name: 'imagesRef',
      title: 'Images Ref',
      type: 'array',
      of: [ { type: 'mainImage' } ]
    }
You can also use a document for your imageArray if you have more fields
It should give you something like this
Thank you - it looked like the “array” was causing the problem. I’ll try this now
user T
Worked like a charm. Sincere thanks for your help! 👍👍

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?