UseDetailPage

Status: Developer Preview

This hook is used to create an entity detail page which can read and update an entity.

Example

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>

Parameters

options

parameterDetailPageOptions<T, C, U, EntityField, VarNameCreate, VarNameUpdate>

@vendure/dashboard Sourcev3.3.0

Options used to configure the result of the useDetailPage hook.

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]>;    transformCreateInput?: (input: VariablesOf<C>[VarNameCreate]) => VariablesOf<C>[VarNameCreate];    transformUpdateInput?: (input: VariablesOf<U>[VarNameUpdate]) => VariablesOf<U>[VarNameUpdate];    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.

transformCreateInput

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

transformUpdateInput

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

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.

@vendure/dashboard Sourcev3.3.0

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;}

form

propertyUseFormReturn<RemoveNullFields<VariablesOf['input']>>

submitHandler

property(event: FormEvent<HTMLFormElement>) => void

entity

propertyDetailPageEntity<T, EntityField>

isPending

propertyboolean

refreshEntity

property() => void

resetForm

property() => void