Studio React Hooks

import { useClient } from 'sanity'

export function MyComponent() {
  const [types, setTypes] = useState(undefined)
	const client = useClient({ apiVersion: '2023-01-01' }).withConfig({ perspective: 'raw'})
  
  useEffect(() => {
    async function fetchTypes() {
      const res = await client.fetch(`array::unique(*[]._type)`)
      setTypes(res)
    }
    if (!types) fetchTypes();
  }, [])

	return (
		<div>
			<h1>Types in project</h1>
				<ul>	
					{types && types.map(type => (
						<li key={type}>{type}</li>
					)}
				</ul>
		</div>
	)
}

import { useDataset } from 'sanity'

export function MyComponent() {
	const dataset = useDataset()
	return (
		{dataset === 'production' ? <ProductionComponent /> : <StagingComponent />}
	)
}

import { useProjectId } from 'sanity'

export function MyComponent() {
	const pid = useProjectId()
	return (
			<h1>Project ID: {pid}</h1>
	)
}

import { useFormValue } from 'sanity'

export function MyComponent() {
	// ⬇ get value of field 'name' in object 'author'
  const authorName = useFormValue(['author', 'name'])
	// ⬇ get value of the second item in array 'tags' of type 'string'
	const secondTag = useFormValue(['tags', 1])
	// ⬇ get value of the reference with the matching key in an array of references
	const specificBook = useFormValue([ 'bibliography', {_key: '<key>'} ])

  return (
		<div>Author: {authorName}</div>
	)
}

import { useSchema } from 'sanity'

export function MyComponent() {
  const [selectedSchema, setSelectedSchema] = useState(undefined)
	
	// ⬇ the returned value contains the complete catalog of schemas in
	// the project, as well as some neat methods for interacting with them
  const schema = useSchema()

  // ⬇ returns an array of all type names in project
  const types = schema.getTypeNames()

  const handleSelect = (type) => {
		// ⬇ contrived example to show usage of 
		// both schema.has() and schema.get()
		if(schema.has(type)) {
			setSelectedSchema(schema.get(type))
		} else {
			setSelectedSchema(undefined)
		}
  }
  // ⬇ list all types in project and display schema for selected type
  return (
    <Container>
      <Card>
        {types.map((type) => (
          <button key={type} onClick={() => handleSelect(type)}>
            {type}
          </button>
        ))}
      </Card>
      <Card>
				{selectedSchema && (
					<pre>{JSON.stringify(selectedSchema, null, 2)}</pre>
				)}
			</Card>
    </Container>
  )
}

import { useTemplates } from 'sanity'

export function MyComponent() {
  const templates = useTemplates()

  return (
    <ul>
      {templates.map((template) => (
        <li key={template.id}>
          <h1>{template.title}</h1>
          <h2>Type: {template.schemaType}</h2>
        </li>
      ))}
    </ul>
  )
}

import { useTools } from 'sanity'

export function MyComponent() {
  const tools = useTools();
  
	return (
		<div>
			<h1>Studio Tools</h1>
		  <ul>
				{tools.map(tool => <li key={tool.name}>{tool.title}</li>)}
			</ul>
		</div>
		)
}

import { useWorkspace } from 'sanity'
			
export function MyComponent() {
  const { currentUser: { name }, dataset } = useWorkspace();
	return (
		 <h1>Hello, {name}! You are currently working in {dataset}!</h1>
	)
}

import {useMemo} from 'react'
import {useObservable} from 'react-rx'

const INITIAL_STATE = []

export function MyComponent() {
  const docId = useFormValue(['_id'])
  const documentStore = useDocumentStore();
  const observable = useMemo(() => 
    documentStore.listenQuery(
      `*[_type == 'article' && references($currentDoc) && !(_id in path("drafts.**"))]`,
      {currentDoc: docId},
      {}
    )
  , [documentStore, docId]);
  const results = useObservable(observable, INITIAL_STATE);  

	return (
	  /** Render component */
	)
}

import {useClient} from 'sanity'
import {useMemo, useEffect, useState} from 'react'

function MyComponent() {
  const baseClient = useClient({apiVersion: '2025-02-19'})
  const client = useMemo(
    () => baseClient.withConfig({perspective: 'raw'}),
    [baseClient]
  )

  const [data, setData] = useState(null)

  useEffect(() => {
    client.fetch('*[_type == "post"][0..9]').then(setData)
  }, [client])

  return <div>{JSON.stringify(data)}</div>
}