Join us live Sept. 27 – How Sanity and Vercel powered Morning Brew's transformation –>

I’m trying to insert an item into an array in a custom input component but nothing happens.

5 replies
Last updated: Oct 6, 2020

Can anyone help me here? I’m trying to insert an item into an array in a custom input component but nothing happens. I’m importing PatchEvent like this,

import PatchEvent from 'part:@sanity/form-builder/patch-event'
.And then supposedly firing in an
onAction
handler here;
const handleAction = (field) => {
    const patches = [
      { path: [], type: "setIfMissing", value: [] }, 
      {
        type: "insert",
        items: [{ _type: field.name }],
        path: [-1]
      }
    ]

    PatchEvent.from(patches)
}
But the value is never updated.

Oct 6, 2020, 9:59 AM

Some additional info that might be useful. I know the event fires because I can log out field. I get no error in Sanity dashboard or the console.

Oct 6, 2020, 10:04 AM

Also, the handler is attached to an imported Sanity dropdown button,

<Button
  kind="simple"
  items={type.of}
  onAction={(field) => handleAction(field)}
  inverted={true}
>
  Add
</Button>

Oct 6, 2020, 10:09 AM

So I figured out why nothing was happening and that because I forgot to wrap the

PatchEvent
in the
onChange
method — 🤦‍♀️. So now I do get an error. My updated PatchEvent looks like this,
onChange(PatchEvent.from(insert({items: [{ _type: field.name, path: [-1] }]})).prepend(setIfMissing([])))
and the new error is,
Cannot read property 'length' of undefined

Oct 6, 2020, 10:38 AM

I’ve made some progress on this. I think I have the patch right (maybe), currently my handler looks like this;

const handleAction = (field) => {
    const patches = insert(
      [{ _type: field.name }],
      'after'
    )
    const patchFrom = PatchEvent.from(patches).prepend(setIfMissing([]))
  
    onChange(patchFrom)
}
My error now is
Attempt to apply insert patch to non-array value
and if I log the
typeof value
it does return
object
.

Oct 6, 2020, 11:30 AM

Hallelujah, I’ve got this working… for a bit anyways. For anyone who is interested this is what my final handler looks like;

const handleAction = (field) => {
    const patches = insert(
      [{ _type: field.name }],
      'after',
      [-1]
    )
    const patchFrom = PatchEvent.from(patches).prepend(setIfMissing([]))
  
    onChange(patchFrom)
  }
The item param will need some work, like a
_key
etc but otherwise this is now inserting an item on to the end of
value
.

Oct 6, 2020, 12:56 PM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.