Edward
Edward

Reputation: 1508

Sanity Array of Objects

I'm attempting to transform all my frontmatter from a legacy git based CMS into Sanity's ironically named CMS but I'm having difficulties with the arrays. For reference, here is my frontmatter:

resources.md

title: "Resources" 
heading: "Check out our resources"
resources_list: 
- title: User Manual
  icon: "/assets/manual.jpg"
  asset: "/assets/user-manual.pdf"

First I created a document type for the resources page and added the array to the fields: resources.js

export default {
  name: 'resourcesPage',
  title: 'Resources Page',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string'
    }, 
    {
      name: 'heading',
      title: 'Heading',
      type: 'string'
    },
    {
      name: 'resourcesList',
      title: 'Resources List',
      type: 'array',
      of: [
        {
          type: 'object',
          fields: [
            {
              title: 'Title',
              name: 'title',
              type: 'string'
            },
            {
              title: 'Icon',
              name: 'icon',
              type: 'image'
            },
            {
              title: 'Asset',
              name: 'asset',
              type: 'file'
            }
          ]
        }
      ],
    }
  ]
}

Then I get the follwoing error after I attempt to run sanity graphql deploy

Error: Encountered anonymous inline object "object" for field/type "resourcesList". To use this field with GraphQL you will need to create a top-level schema type for it. See https://docs.sanity.io/help/schema-lift-anonymous-object-type

I follow their vague docs by creating another schema type for the object I want to place in my array: resourceObj.js

export default {
  type: 'object', 
  title: 'Resource',
  name: 'resourceObj',
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string'
    },
    {
      title: 'Icon',
      name: 'icon',
      type: 'image'
    },
    {
      title: 'Asset',
      name: 'asset',
      type: 'file'
    }
  ]
}

Then I add it to the resources page schema:

export default {
  name: 'resourcesPage',
  title: 'Resources Page',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string'
    }, 
    {
      name: 'heading',
      title: 'Heading',
      type: 'string'
    },
    {
      name: 'resourcesList',
      title: 'Resources List',
      type: 'array',
      of: [
        {
          type: 'resourceObj',
        }
      ],
    }
  ]
}

When I run sanity graphql deploy again I get the following error:

Error: resourcesPage - (document) / fields / resourcesList - (array) / of / <unnamed_type_@_index_0> - (resourcesObj)

Why would sanity not recognize my object?

Upvotes: 1

Views: 4049

Answers (1)

Edward
Edward

Reputation: 1508

In order to use objects in an array, you need to create a separate file for the object in the schema directory and make sure to import it on schema.js:

// First, we must import the schema creator
import createSchema from 'part:@sanity/base/schema-creator'

// Then import schema types from any plugins that might expose them
import schemaTypes from 'all:part:@sanity/base/schema-type'
import resourcesPage from './ownerGarage'
import resourceObj from './resourceObj'

// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
  // We name our schema
  name: "default",
  // Then proceed to concatenate our document type
  // to the ones provided by any plugins that are installed
  types: schemaTypes.concat([
    /* Your types here! */
    resourcesPage,
    resourceObj
  ]),
});


Upvotes: 3

Related Questions