✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Issues with array field and reference type in navMenu schema

5 replies
Last updated: Jun 11, 2023
The closest I've gotten is by passing an empty span, but that looks horrible. The media's html element in the preview list container has a fixed height and width. I would expect that if I specifically pass null or false to the media property, that it would hide it altogether.
Jun 11, 2023, 12:35 AM
UPDATE: solved, but not sure if this is the best way
Okay, I've got another related issue: The screenshot above is of my navMenu schema. I've set up a field of type
array
and it can take custom objects such as
menuItem
, but it can also take a
reference
type to itself,
navMenu
, so that I can have sub menus. My issue is I'm not getting the expected data in the list previews. What's odd to me (because I'm still learning Sanity) is that the correct icon will show up for the
reference
type, but for everything else I'm getting
undefined
. I'm probably doing something wrong.
If I do it like this:


 defineField({
   name: "items",
   title: "Menu Items", // e.g. 'Categories', 'Sale'
   type: "array",
   of: [
     { type: "menuItemWithIcon" }, // e.g. 'New Arrivals', 'Tops', etc.
     { type: "menuItemWithImage" },
     { type: "reference", to: [{ type: "navMenu" }] },
   ],
   validation: (Rule) => [Rule.min(1), Rule.unique()],
}),
the result is like this:
Jun 11, 2023, 1:14 PM
As you can see, the validation is working, as are the titles, but I want to use a different icon to better represent a submenu item.
Jun 11, 2023, 1:16 PM
So I resorted to something I did in another schema, but feels hacky:

defineField({
    // doing this so I can alter the appearance of the menuItem in the dropdown, but I lose the ability to reference the data in the preview
    name: 'submenu',
    title: 'Sub Menu',
    type: 'object',
    icon: BsListNested,
    preview: {
       select: {
          // NOT SURE WHAT TO SELECT HERE??
          title: 'navMenu',
       },
       prepare({ title }) {
           console.log('title', title);
           return {
             title: title,
             media: BsListNested,
           };
        },
     },
     fields: [
        defineField({
          name: 'submenuReference',
          type: 'reference',
          to: [{ type: 'navMenu' }],
        }),
      ],
}),
and the result I get with this spaghetti code is:
Jun 11, 2023, 1:20 PM
I don't know what to select in the preview object. Everything I try comes back as
undefined
.
Jun 11, 2023, 1:36 PM
Golly bum! I know I tried this
title: 'submenuReference.title'
and was still getting
undefined
, but now it's working as expected. However, do I really have to define an inline object like that to achieve the desired result or is there a more concise way?
Jun 11, 2023, 1:46 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?