Cannot access full document in deskStructure, only type and publishedAt
Looking at your issue, when you're accessing document data in a custom view component within deskStructure, you're only seeing type and publishedAt instead of the full document. This is a common issue that happens because the document prop passed to custom view components contains limited information by default.
The Solution: Use Sanity Hooks to Access Full Document Data
To get the full document data in your custom view component, you need to use Sanity's built-in React hooks. Here are the main approaches:
1. Using useFormValue() Hook (Recommended for form context)
If your custom view is part of the document editing context, use the useFormValue() hook to access any field value:
import { useFormValue } from 'sanity'
export function MyCustomView() {
// Get the entire document
const document = useFormValue([])
// Or get specific fields
const title = useFormValue(['title'])
const author = useFormValue(['author', 'name'])
return (
<div>
<h1>{document.title}</h1>
<pre>{JSON.stringify(document, null, 2)}</pre>
</div>
)
}The useFormValue([]) with an empty array returns the entire document object.
2. Using useDocumentStore() Hook (For more control)
If you need to query or listen to document changes, use the useDocumentStore() hook:
import { useDocumentStore } from 'sanity'
import { useEffect, useState } from 'react'
export function MyCustomView(props) {
const documentStore = useDocumentStore()
const [document, setDocument] = useState(null)
useEffect(() => {
const subscription = documentStore
.listenQuery(`*[_id == $id][0]`, { id: props.documentId })
.subscribe((result) => {
setDocument(result)
})
return () => subscription.unsubscribe()
}, [props.documentId])
return <div>{/* Use full document data */}</div>
}3. Using useClient() Hook (For fetching data)
If you need to fetch the document data directly, use the useClient() hook:
import { useClient } from 'sanity'
import { useEffect, useState } from 'react'
export function MyCustomView(props) {
const client = useClient({ apiVersion: '2023-01-01' })
const [document, setDocument] = useState(null)
useEffect(() => {
async function fetchDocument() {
const doc = await client.fetch(
`*[_id == $id][0]`,
{ id: props.documentId }
)
setDocument(doc)
}
fetchDocument()
}, [props.documentId])
return <div>{/* Use full document data */}</div>
}Why This Happens
The document prop passed to custom view components in Structure Builder only contains metadata like _type and publishedAt by default. This is by design to keep the component lightweight. To access the full document data, you need to explicitly fetch it using one of the hooks above.
The useFormValue([]) approach is usually the simplest and most efficient when you're working within the document editing context, as it taps directly into the form state without additional queries.
You can learn more about all available Studio hooks in the Studio React Hooks documentation.
Show original thread5 replies
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.