Discussion on how to automatically push references between document types in Sanity.io

      patch.execute([{
        "insert": {
          "before": "artworks[0]",
          "items": [{"_ref": <http://props.id|props.id>, "_type":"reference", "_key": <http://props.id|props.id> }]
        }
      }])

import { useState, useEffect } from 'react'
import { useDocumentOperation } from '@sanity/react-hooks'

export function setAndPublishAction(props) {

  if (props.type !== 'artwork') {
    return null
  }

  const { publish } = useDocumentOperation(<http://props.id|props.id>, props.type)
  const { patch } = useDocumentOperation(props.published.artist._ref, 'artist')
  const [isPublishing, setIsPublishing] = useState(false)

  useEffect(() => {
    // if the isPublishing state was set to true and the draft has changed
    // to become `null` the document has been published
    if (isPublishing && !props.draft) {
      setIsPublishing(false)
    }
  }, [props.draft])

  return {
    disabled: publish.disabled,
    label: isPublishing ? 'Publishing…' : 'Amy, please don't press this one',
    onHandle: () => {
      // This will update the button text
      setIsPublishing(true)
      // Add artwork to "artworks" array on referenced Artist document
      patch.execute([{
        "insert": {
          "before": "artworks[0]",
          "items": [{"_ref": <http://props.id|props.id>, "_type":"reference", "_key": <http://props.id|props.id> }]
        }
      }])
      // Perform the publish
      publish.execute()
      // Signal that the action is completed
      props.onComplete()
    }
  }
}

import CheckIcon from 'part:@sanity/base/check-icon'
import { useState, useEffect } from 'react'
import { useDocumentOperation } from '@sanity/react-hooks'
import sanityClient from '@sanity/client'
const client = sanityClient({
  projectId: 'id',
  dataset: 'production',
  token: 'token', // or leave blank to be anonymous user
  useCdn: false
})
import { nanoid } from 'nanoid'

export function SetAndPublishAction(props) {

  const { publish } = useDocumentOperation(<http://props.id|props.id>, props.type)
  const [isPublishing, setIsPublishing] = useState(false)

  useEffect(() => {
    // if the isPublishing state was set to true and the draft has changed
    // to become `null` the document has been published
    if (isPublishing && !props.draft) {
      setIsPublishing(false)
    }
  }, [props.draft])

  return {
    disabled: publish.disabled,
    icon: CheckIcon,
    label: isPublishing ? 'Publishing…' : 'Publish',
    onHandle: () => {
      // This will update the button text
      setIsPublishing(true)
      // Add artwork to "artworks" array on referenced Artist document
      if (props.type == 'artwork') {
        if (props.draft.artist._ref) {
          const artistId = props.draft.artist._ref
          const query = '*[_type == "artist" && _id == $artistId][0].artworks'
          const params = { artistId }
          client.fetch(query, params).then(artworks => {
            const check = artworks.some(artwork => artwork._ref === <http://props.id|props.id>)
            if (check) {
              console.log('Artwork already referenced on Artist');
            } else {
              console.log('Artwork now added to Artist');
              client
                .patch(artistId)
                // Ensure that the `artworks` arrays exists before attempting to add items to it
                .setIfMissing({artworks: []})
                // Add the items after the last item in the array (append)
                .insert('before', 'artworks[0]', [
                  // Add a `_key` unique within the array to ensure it can be addressed uniquely
                  // in a real-time collaboration context
                  {_key: nanoid(), _ref: <http://props.id|props.id>, _type:"reference" }
                ])
                .commit()
            }
          })
        } else {
          alert('Please provide an artist reference.')
        }
      }
      // Perform the publish
      publish.execute()
      // Signal that the action is completed
      props.onComplete()
    }
  }
}