Get help on Discord

Using `useFormValue` to access current document properties in Sanity

4 replies
Last updated: Jun 25, 2024
We have a field that is using a custom input component `AsyncListInput`:

defineField({
    name: "crmUpdateFieldId",
    type: "string",
    options: { /* snipped */ },
    components: {
        input: AsyncListInput,
    },
}),

const AsyncListInput = (props: any) => {
    const { schemaType, renderDefault } = props

    const dossierTypeId = /* Get dossierTypeId from the current document somehow */

    // get values from API 
    const values = /* snipped ... */

    return renderDefault({
        ...props,
        schemaType: { ...schemaType, options: { list: values } },
    })
}
Within 
AsyncListInput
we call an API and would like to supply a property value that was set in the document that is currently being edited.Is there any way to access properties from the current document from 
AsyncListInput
?I know we can call the Sanity API, get the draft document and take the property value that way but I'm hoping the document is already accessible in another way without doing the API call.
AI Update

Yes! You can absolutely access the current document's properties in your custom input component without making an API call. The solution is to use the useFormValue hook from Sanity.

Here's how to update your AsyncListInput component:

import { useFormValue } from 'sanity'

const AsyncListInput = (props: any) => {
    const { schemaType, renderDefault } = props

    // Access the entire document
    const document = useFormValue([])
    
    // Or access a specific field directly
    const dossierTypeId = useFormValue(['dossierTypeId'])

    // get values from API using dossierTypeId
    const values = /* your API call using dossierTypeId */

    return renderDefault({
        ...props,
        schemaType: { ...schemaType, options: { list: values } },
    })
}

The useFormValue hook takes an array path to the field you want to access:

  • useFormValue([]) - returns the entire document
  • useFormValue(['dossierTypeId']) - returns just the dossierTypeId field
  • useFormValue(['nested', 'field', 'path']) - for deeply nested fields

This is the modern, recommended approach in Sanity Studio v3. In v2, you would have used the withDocument HOC, but that's been replaced with this hook-based approach.

Important note: The component will re-render whenever the field you're watching changes. If you're watching the entire document with useFormValue([]), it will re-render on any document change. For better performance, access only the specific field(s) you need.

To check that I’m understanding, you want values from a field in the same document that this component is in?
Yes
You can use the 
useFormValue
hook to get it then. You need to import that from the 
sanity
package and pass it the path to the field.
Brilliant, thanks!!!

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.

Get started for freeExplore the demo

Was this answer helpful?