useFormValue hook missing context in custom document action
Error: FormBuilder: missing context value
at useFormBuilder (useFormBuilder.ts:13:11)
at useFormValue (useFormValue.ts:29:19)
at SetAndPublishAction (SetAndPublishAction.ts:9:26)
at HookStateContainer2 (HookStateContainer.ts:24:23)
at renderWithHooks (react-dom.development.js:16305:18)
at mountIndeterminateComponent (react-dom.development.js:20074:13)
at beginWork (react-dom.development.js:21587:16)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)Here is the code im using:
import { useState, useEffect } from 'react'
import { useDataset, useDocumentOperation, useFormValue } from 'sanity'
import { toHTML } from '@portabletext/to-html'
export function SetAndPublishAction(props: any) {
const { patch, publish } = useDocumentOperation(props.id, props.type)
const [isPublishing, setIsPublishing] = useState(false)
const documentData = useFormValue([props.id, "country"])
const dataset = useDataset()
useEffect(() => {
// if the isPublishing state was set to true and the draft has changed
// to become `null` the document has been published
if (isPublishing && !props.draft) {
setIsPublishing(false)
}
}, [props.draft])
return {
disabled: publish.disabled,
label: isPublishing ? 'Publishing' : 'Publish & Update',
onHandle: () => {
// This will update the button text
setIsPublishing(true)
// Set publishedAt to current date and time
patch.execute([{ set: { name: "hello world" } }])
console.log("logging test here: ,", dataset)
// Perform the publish
publish.execute()
// Signal that the action is completed
props.onComplete()
},
}
}export default defineConfig({
name: 'default',
title: 'escape-cms',
projectId: '*****',
dataset: 'production',
plugins: [deskTool(
{
structure: myStructure,
defaultDocumentNode: defaultDocumentNodeResolver,
}
), visionTool()],
document: {
actions: (prev: any) =>
prev.map((originalAction: any) =>
originalAction.action === 'publish' ? SetAndPublishAction : originalAction
),
},
schema: {
types: schemaTypes,
},
})Any help would be much apreciated.
thx
The error you're seeing is expected! useFormValue only works within custom input components that are part of the form builder context. It cannot be used in document actions because actions don't have access to the form context.
According to the Sanity documentation on useFormValue, attempting to use it outside of custom input components will result in the "FormBuilder: missing context value" error you're encountering.
For document actions, you should use props.draft and props.published to access document values instead:
export function SetAndPublishAction(props: any) {
const { patch, publish } = useDocumentOperation(props.id, props.type)
const [isPublishing, setIsPublishing] = useState(false)
const dataset = useDataset()
// Access document data from props instead of useFormValue
const country = props.draft?.country || props.published?.country
useEffect(() => {
if (isPublishing && !props.draft) {
setIsPublishing(false)
}
}, [props.draft])
return {
disabled: publish.disabled,
label: isPublishing ? 'Publishing' : 'Publish & Update',
onHandle: () => {
setIsPublishing(true)
// You can now use the country value here
console.log("Country value:", country)
patch.execute([{ set: { name: "hello world" } }])
console.log("Dataset:", dataset)
publish.execute()
props.onComplete()
},
}
}Key points:
props.draftcontains the current draft document (if it exists)props.publishedcontains the published version- For the most current data, check
props.draftfirst, then fall back toprops.published - You can access any field using standard JavaScript object notation:
props.draft?.country
This is the correct pattern for accessing document values in custom document actions!
Show original thread5 replies
Was this answer helpful?
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.