The document store hooks provide access to the configured Sanity client and project information from anywhere in your Studio.
useClient
Returns a configured Sanity client instance based on the current workspace.
import {useClient} from 'sanity'
function MyComponent() {
const client = useClient({apiVersion: '2024-01-01'})
// Use client for queries and mutations
}
Client configuration optionsAPI version to use (e.g., '2024-01-01'). Required to prevent breaking changes.
A configured Sanity client instance, automatically memoized based on API version
Example
function DocumentCounter() {
const client = useClient({apiVersion: '2024-01-01'})
const [count, setCount] = useState(0)
useEffect(() => {
client.fetch('count(*[_type == "article"])').then(setCount)
}, [])
return <div>Articles: {count}</div>
}
useDataset
Returns the name of the current dataset.
import {useDataset} from 'sanity'
function MyComponent() {
const dataset = useDataset()
console.log('Current dataset:', dataset)
}
The name of the current dataset (e.g., 'production', 'staging')
useProjectId
Returns the current project ID.
import {useProjectId} from 'sanity'
function MyComponent() {
const projectId = useProjectId()
console.log('Project ID:', projectId)
}
The current Sanity project ID
useDocumentOperation
Access document operations for a specific document.
import {useDocumentOperation} from 'sanity'
function MyComponent({documentId, documentType}: Props) {
const ops = useDocumentOperation(documentId, documentType)
const handlePublish = () => {
if (!ops.publish.disabled) {
ops.publish.execute()
}
}
}
The published document ID (without drafts. prefix)
The document schema type name
Optional version identifier for versioned documents
useSchema
Access the current Studio schema.
import {useSchema} from 'sanity'
function MyComponent() {
const schema = useSchema()
const articleType = schema.get('article')
}
The compiled Studio schema containing all document types and field definitions
useEditState
Observe the edit state of a document.
import {useEditState} from 'sanity'
function MyComponent({documentId, documentType}: Props) {
const editState = useEditState(documentId, documentType)
if (!editState) return <div>Loading...</div>
return (
<div>
<div>Draft: {editState.draft ? 'Yes' : 'No'}</div>
<div>Published: {editState.published ? 'Yes' : 'No'}</div>
</div>
)
}
The published document ID
The document schema type name
Object containing document state informationThe draft version of the document, if it exists
The published version of the document, if it exists