👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Issue with useFormValue hook in a 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
Sep 22, 2023, 1:42 PM
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
.
Sep 22, 2023, 5:23 PM
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
Sep 25, 2023, 6:26 AM
I also tried this. Which does not work either..
const documentData = useFormValue([props.type as string, "name"])
Sep 25, 2023, 7:49 AM
Spamming this alittle.. But guessing the obvious work-around here is useClient to get the data...
Sep 25, 2023, 8:39 AM
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
😃
Sep 25, 2023, 9:57 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?