Dynamically add a referenced field to another document using Sanity

I have a sanity v3 document. In which There is a Pin section which contains

  • Title -> String
  • about -> String
  • destination -> String
  • image -> Url
  • savedBy [ ] -> Array
  • commentedBy [ ] -> Array of referenced Value

QUESTION: So, the commentedBy section is an array of referenced object field, where it is pointing to the Comment document.

Now, If I want to add a comment to a Pin, first i have to manually create that comment (which is expected), after that I manually set/reference the comment to that pin.

Problem: Is that whenever i/someone creates a new comment that comment should automatically be added/referenced to the pin document! Which it does not do. For now Manually I have to do it!

Attempts:

  • I have tried adding referencing the comment section to the Pin document.
  • Tried creating a whole comment section inside of the Pin document. At the end it messes up with the code!

Work-around: Well there is a cheap solution to solve this problem. For example, whenever comment is made manually set the reference to the pin Section, simultaneously creating the comment. This might work around for small group of users but for large group of users this will put a lot of pressure to the backend.

Search: For these different approaches I looked into these websites! Sanity Doc v3,
Sanity Cross-Reference

Code:

  // comment.js document

  export default defineType({
  name: 'comments',
  title: 'Comments',
  type: 'document',
  fields: [
    defineField({
      name: 'pinId',
      title: 'PinId',
      type: 'reference',
      to: [{type: 'pins'}],
    }),
    defineField({
      name: 'postedBy',
      title: 'PostedBy',
      type: 'reference',
      to: [{type: 'user'}],
    }),
    defineField({
      name: 'comment',
      title: 'Comment',
      type: 'string',
    }),
  ],
  })

// pin.js document
export default defineType({
  name: 'pins',
  title: 'Pins',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
    }),
    defineField({
      name: 'about',
      title: 'About',
      type: 'string',
    }),
    defineField({
      name: 'destination',
      title: 'Destination',
      type: 'url',
    }),
    defineField({
      name: 'category',
      title: 'Category',
      type: 'string',
    }),
    defineField({
      name: 'userId',
      title: 'userId',
      type: 'string',
    }),
    defineField({
      name: 'image',
      title: 'image',
      type: 'image',
      options: {
        hotspot: true,
      },
    }),
    defineField({
      name: 'postedBy',
      title: 'Posted By',
      type: 'reference',
      to: [{type: 'user'}],
    }),
    defineField({
      name: 'save',
      title: 'Save',
      type: 'array',
      of: [{type: 'save'}],
    }),
    defineField({
      name: 'comments',
      title: 'Comments',
      type: 'array',
      of: [
        {
          type: 'reference',
          to: [{type: 'comments'}],
        },
      ],
    }),
  ],
})