[deprecated] Studio React hooks

A collection of convenient React hooks for working with the Studio

Studio React hooks is a collection of React hooks that makes it more convenient to work with documents in custom workflows and custom input components. The hooks provide access to document states as well as ways to perform operations on documents.

All hooks can be imported from the sanity package, such as import { useEditState } from 'sanity'.

This hook provides information about a document's edit state.

Returns an object that contains the draft document if available, and the published document if available.

null will be returned if the document is not yet available. The returned object has the following properties

import {useEditState} from 'sanity'

function MyComponent() {
  const {draft, published} = useEditState('someDocId', 'someDocType')
  if (published && draft) {
	  return <>This document is published and has edits</>
  }
  if (published) {
	  return <>This document is published and has no draft</>
  }
  if (draft) {
	  return <>This document has a draft</>
  }
  return <>This document does not exist</>
}

Returns the validation result for a document.

Returns an object with the following properties:

import {useValidationStatus} from 'sanity'

function MyComponent() {
  const {isValidating, markers} = useValidationStatus('someDocId', 'someDocType')
  if (isValidating) {
	  return <>Validation in progress…</>
  }
  if (markers.length === 0) {
	  return <>This document is ✨perfect✨</>
  }
  return (
    <>
      This document has issues: 
      <ul>
        {markers.map(marker =>
          <li>{marker.level}: {marker.item.message}</li>
        )}
			</ul>
    </>
}

This hook provides information about whether a document is currently being synced with the hosted data store or not. This hook is connected to a browser-local replica of the document. Every edit will go through this document and applied immediately. At regular intervals, the local edits will be synchronized with the server, and this hook will return information about whether local changes are currently synchronized. This hook is useful if you want to know in your component whether there are local changes currently being synced or not.

Returns an object with the following properties:

import {useSyncState} from 'sanity'

function MyComponent() {
  const {isSyncing} = useSyncState('someDocId', 'someDocType')
  return <>{isSyncing ? `Synchronizing…` : `Synchronized`}</>
}

This hook returns a value indicating whether the document is currently connected to the hosted data store. This react hook returns information about the connection status of the local document.

Returns a string with one of the following values:

'connecting' | 'reconnecting' | 'connected'

It will return connecting if the document is currently being loaded, connected if the document is connected to the datastore or reconnecting if the connection is lost.

import {useSyncState} from 'sanity'

function MyComponent() {
  const syncState = useSyncState('someDocId', 'someDocType')
  if (syncState === 'connecting') {
    return <>Loading document…</>
  }
  if (syncState === 'reconnecting') {
    return <>Connection lost. Reconnecting…</>
  }
  if (syncState === 'connected') {
    return <>Connected to data store…</>
  }
  return null
}

This hook returns a set of operations for a given document. See the list of possible operations in the Operations section below. Each operation is an object that has a disabled and an execute method. The enabled property takes no parameters, and returns either false or a disabledReason string identifier. Each set of operation has its own set of disabledReason identifiers. Refer to the documentation for each operation below for more details.

The hook consists of the following operations:

• publish
• delete
• patch
• discardChanges
• unpublish
• duplicate
• restore

This will publish the document.

Returns an object with the following properties:

This will only work in Studio for now.

import {useDocumentOperation} from 'sanity'

function MyComponent() {
  const {publish} = useDocumentOperation('someDocId', 'someDocType')
  return (
   <button
    type="button"
    disabled={!!publish.disabled}
    onClick={() => publish.execute()}
   >
     Publish
   </button>
  )
}

Use this operation to delete a document. Also exported as del so it can be used as a valid JavaScript identifier.

Returns an object with the following properties:

This will only work in Studio for now.

import {useDocumentOperation} from 'sanity'

function MyComponent() {
  const {del} = useDocumentOperation('someDocId', 'someDocType')
  return (
   <button
    type="button"
    disabled={!!del.disabled}
    onClick={() => del.execute()}
   >
     Delete
   </button>
  )
}

Use this to make modifications (mutations) to a document. The execute function is synchronous and the modifications will be applied immediately.

Returns an object with the following properties:

import {useDocumentOperation} from 'sanity'

function MyComponent() {
  const {patch} = useDocumentOperation('someDocId', 'someDocType')
  return (
   <button
    type="button"
    disabled={!!patch.disabled}
    onClick={() => patch.execute([{set: {title: 'Hello'}}])}
   >
     Change title
   </button>
  )
}

This operation provides a way to discard the current unpublished changes (if any).

Returns an object with the following properties:

This operation unpublishes the document.

Returns an object with the following properties:

import {useDocumentOperation} from 'sanity'

function MyComponent() {
  const {unpublish} = useDocumentOperation('someDocId', 'someDocType')
  return (
   <button
    type="button"
    disabled={!!unpublish.disabled}
    onClick={() => unpublish.execute()}
   >
     Unpublish
   </button>
  )
}

This operation creates a duplicate of a document. It will create a new draft with the same contents as the current document. It will be disabled if the current document is empty (e.g. deleted or not yet created).

Returns an object with the following properties:

import {useDocumentOperation} from 'sanity'
import {v4 as uuid} from 'uuid'

function MyComponent() {
  const {duplicate} = useDocumentOperation('someDocId', 'someDocType')

  const onClick = () => {
    const dupeId = uuid()
    duplicate.execute(dupeId)
  }

  return (
   <button
    type="button"
    disabled={Boolean(duplicate.disabled)}
    onClick={onClick}
   >
     Duplicate
   </button>
  )
}

This operation makes it possible to restore a document to a previous revision.

Returns an object with the following properties: