Function useCubicWebForm

Provides a wrapper around useForm from react-hook-form to use with CubicWeb.

Along with the current entity schema and the loading state, the hook returns the useForm values in the formMethods key. Use this to build your own form as you would using react-hook-form. It also provides a custom onSubmit function which sends the data to the appropriate endpoints. That function parses backend errors and assigns them to the correct field using react-hook-form's setError.

If an eid is provided, it will fetch the entity values on load.

You can easily specify which relations to ignore with the omittedField parameter. By default it handles all relations/attributes, even those internal to cubicweb such as creation_date.

Example

Here is an example usage. Please refer to the documentation of @cubicweb/client on how to create the schema and client parameters.

To customize error messages, please refer to yup.setLocale. The errorsTranslations parameter is used for custom messages not present in yup.

As your instance's schema and data provider will not change in your app, you will usually want to wrap this hook so you don't have to pass those parameters each time.

import {instanceSchema, client, errorsTranslations} from "./my-data"
import {UseCubicWebFormQueryParams, useCubicWebForm} from "@cubicweb/react-form-utils"

function useMyAppForm(queryParams: UseCubicWebFormQueryParams) {
    return useCubicWebForm(
        instanceSchema,
        client,
        errorsTranslations,
        queryParams
    )
}

function MyFormComponent() {
    const {onSubmit, formMethods, entityTypeSchema, loading} = useMyAppForm(
        {
            type: "EntityType",
            eid: 1,
            omittedFields: ["atttribute_I_want_to_ignore"],
            includeObjectRelations: true,
            onSuccess: (newEid: Identifier) => {
                console.log(`Form submit success for entity #${newEid}!`)
            },
        }
    )
    ...
}
Copy