UseDetailPage | Vendure Docs

const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({    queryDocument: paymentMethodDetailDocument,    createDocument: createPaymentMethodDocument,    updateDocument: updatePaymentMethodDocument,    setValuesForUpdate: entity => {        return {            id: entity.id,            enabled: entity.enabled,            name: entity.name,            code: entity.code,            description: entity.description,            checker: entity.checker?.code                ? {                      code: entity.checker?.code,                      arguments: entity.checker?.args,                  }                : null,            handler: entity.handler?.code                ? {                      code: entity.handler?.code,                      arguments: entity.handler?.args,                  }                : null,            translations: entity.translations.map(translation => ({                id: translation.id,                languageCode: translation.languageCode,                name: translation.name,                description: translation.description,            })),            customFields: entity.customFields,        };    },    transformCreateInput: input => {        return {            ...input,            checker: input.checker?.code ? input.checker : undefined,            handler: input.handler,        };    },    params: { id: params.id },    onSuccess: async data => {        toast.success(i18n.t('Successfully updated payment method'));        resetForm();        if (creatingNewEntity) {            await navigate({ to: `../$id`, params: { id: data.id } });        }    },    onError: err => {        toast.error(i18n.t('Failed to update payment method'), {            description: err instanceof Error ? err.message : 'Unknown error',        });    },});

Signature

function useDetailPage<T extends TypedDocumentNode<any, any>, C extends TypedDocumentNode<any, any>, U extends TypedDocumentNode<any, any>, EntityField extends keyof ResultOf<T> = keyof ResultOf<T>, VarNameUpdate extends keyof VariablesOf<U> = 'input', VarNameCreate extends keyof VariablesOf<C> = 'input'>(options: DetailPageOptions<T, C, U, EntityField, VarNameCreate, VarNameUpdate>): UseDetailPageResult<T, U, EntityField>

Signature

interface DetailPageOptions<T extends TypedDocumentNode<any, any>, C extends TypedDocumentNode<any, any>, U extends TypedDocumentNode<any, any>, EntityField extends keyof ResultOf<T> = DetailEntityPath<T>, VarNameCreate extends keyof VariablesOf<C> = 'input', VarNameUpdate extends keyof VariablesOf<U> = 'input'> {    pageId?: string;    queryDocument: T;    entityField?: EntityField;    params: {        id: string;    };    entityName?: string;    createDocument?: C;    updateDocument?: U;    setValuesForUpdate: (        entity: NonNullable<ResultOf<T>[EntityField]>,    ) => WithLooseCustomFields<VariablesOf<U>[VarNameUpdate]>;    setValuesForCreate?: NoInfer<        (params: Record<string, string>) => WithLooseCustomFields<Partial<VariablesOf<C>[VarNameCreate]>>    >;    transformCreateInput?: (input: VariablesOf<C>[VarNameCreate]) => VariablesOf<C>[VarNameCreate];    transformCreateVariables?: (variables: VariablesOf<C>) => VariablesOf<C>;    transformUpdateInput?: (input: VariablesOf<U>[VarNameUpdate]) => VariablesOf<U>[VarNameUpdate];    extendSchema?: (schema: ZodObject<any>) => ZodTypeAny;    sendOnlyChangedFields?: boolean;    onSuccess?: (entity: ResultOf<C>[keyof ResultOf<C>] | ResultOf<U>[keyof ResultOf<U>]) => void;    onError?: (error: unknown) => void;}

pageId

propertystring

The page id. This is optional, but if provided, it will be used to identify the page when extending the detail page query

queryDocument

propertyT

The query document to fetch the entity.

entityField

propertyEntityField

The field of the query document that contains the entity.

params

property{ id: string; }

The parameters used to identify the entity.

entityName

propertystring

The entity type name for custom field configuration lookup. Required to filter out readonly custom fields before mutations. If not provided, the function will try to infer it from the query document.

createDocument

propertyC

The document to create the entity.

updateDocument

propertyU

The document to update the entity.

setValuesForUpdate

property( entity: NonNullable<ResultOf<T>[EntityField]>, ) => WithLooseCustomFields<VariablesOf[VarNameUpdate]>

The function to set the values for the update document.

setValuesForCreate

propertyNoInfer< (params: Record<string, string>) => WithLooseCustomFields<Partial<VariablesOf<C>[VarNameCreate]>> >v3.8.0

The function to set the starting values for the create form, e.g. a parent ID from the route params. It receives the path params of the matched route, not the params option. It runs again only when the route params change. The starting values count as unsaved changes, so a submit button disabled on !form.formState.isDirty is enabled, and leaving the page asks the user to confirm.

Example

setValuesForCreate: params => ({ companyId: params.companyId }),

transformCreateInput

property(input: VariablesOf<C>[VarNameCreate]) => VariablesOf<C>[VarNameCreate]

transformCreateVariables

property(variables: VariablesOf<C>) => VariablesOf<C>v3.8.0

Adjusts the full set of variables sent to the create mutation, for a create mutation which takes more than the input object, such as createCustomer(input:, password:). Runs after transformCreateInput, which has already shaped variables.input.

transformUpdateInput

property(input: VariablesOf[VarNameUpdate]) => VariablesOf[VarNameUpdate]

extendSchema

property(schema: ZodObject<any>) => ZodTypeAnyv3.7.0

Refines the auto-generated Zod schema for this page's form. Use this to declare the fields the user must actually fill in.

The generated schema is derived from the GraphQL input type, which only expresses nullability — and nullability tells you nothing about whether a value is required:

A non-nullable field may still be legitimately empty. String! means "not null", not "not empty", and a non-nullable ID! such as CreateFacetValueInput.facetId may be supplied by the page in transformCreateInput rather than by the user.
A nullable field may still be required by the server. CreateChannelInput. defaultCurrencyCode is nullable, yet ChannelService.create rejects the input unless it is set.

So required-ness is declared per page, here.

Example

extendSchema: schema =>    schema.extend({        code: z.string().min(1, { message: t`This field is required` }),    }),

sendOnlyChangedFields

propertybooleanv3.8.0

Default:false

By default an update mutation sends the full form payload. Set this to true to instead send only the fields the user actually changed, so that an untouched field's stale page-load value cannot silently overwrite a concurrent change made by another admin or via the API.

Only enable this for a detail page whose update mutation is patch-style: an absent field must be left unchanged, and no persisted value may be derived from the (now partial) input. Vendure's built-in Product, Collection and ProductVariant update paths satisfy this; a resolver that recomputes a field from the input — as updatePromotion does for priorityScore — does not, and would corrupt that field when it is omitted.

onSuccess

property(entity: ResultOf<C>[keyof ResultOf<C>] | ResultOf[keyof ResultOf]) => void

The function to call when the update is successful.

onError

property(error: unknown) => void

The function to call when the update is successful.

Signature

interface UseDetailPageResult<T extends TypedDocumentNode<any, any>, U extends TypedDocumentNode<any, any>, EntityField extends keyof ResultOf<T>> {    form: UseFormReturn<RemoveNullFields<VariablesOf<U>['input']>>;    submitHandler: (event: FormEvent<HTMLFormElement>) => void;    entity?: DetailPageEntity<T, EntityField>;    isPending: boolean;    refreshEntity: () => void;    resetForm: () => void;}