Get help on Discord

useFormValue hook missing context in custom document action

5 replies
Last updated: Sep 25, 2023
hello,Im trying to use useFormValue in a custom document action. But no matter what path i put in the hook i get:


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)
What am I missing here?

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()
        },
    }
}
and this is the config:


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
AI Update

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.draft contains the current draft document (if it exists)
  • props.published contains the published version
  • For the most current data, check props.draft first, then fall back to props.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 thread
5 replies
That hook accepts a 
path
so the issue is likely with the array that you’re passing to it. You may also be able to get away with not using it at all, since your document values get passed into your 
props
.
Hey, thanks for replaying. I have tries with alot of different paths, as well as just an empty array. Still have the 
FormBuilder: missing context value
I also tried this. Which does not work either.. 
const documentData = useFormValue([props.type as string, "name"])
Spamming this alittle.. But guessing the obvious work-around here is useClient to get the data...
Ok now i get what your were saying.. The props holds all the values, so i really dont need to use that hook at all..
thank you this solved my problem
😃

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?