Skip to main content

UseDetailPage

useDetailPage​

@vendure/dashboarduse-detail-page.ts
v3.3.0

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, C, U, EntityField>

Parameters

options​

parameter
DetailPageOptions<T, C, U, EntityField, VarNameCreate, VarNameUpdate>

DetailPageOptions​

@vendure/dashboarduse-detail-page.ts
v3.3.0

Status: Developer Preview

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'> {
    queryDocument: T;
    entityField?: EntityField;
    params: {
        id: string;
    };
    entityName: string;
    createDocument?: C;
    updateDocument?: U;
    setValuesForUpdate: (entity: NonNullable<ResultOf<T>[EntityField]>) => 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;
}

queryDocument​

property
T

The query document to fetch the entity.

entityField​

property
EntityField

The field of the query document that contains the entity.

params​

property
{ id: string; }

The parameters used to identify the entity.

entityName​

property
string

The entity type name for custom field configuration lookup. Required to filter out readonly custom fields before mutations.

createDocument​

property
C

The document to create the entity.

updateDocument​

property
U

The document to update the entity.

setValuesForUpdate​

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

The function to set the values for the update document.

transformCreateInput​

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

transformUpdateInput​

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

onSuccess​

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

The function to call when the update is successful.

onError​

property
(error: unknown) => void

The function to call when the update is successful.

UseDetailPageResult​

@vendure/dashboarduse-detail-page.ts
v3.3.0

Status: Developer Preview

Signature
interface UseDetailPageResult<T extends TypedDocumentNode<any, any>, C 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​

property
UseFormReturn<RemoveNullFields<VariablesOf<U>['input']>>

submitHandler​

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

entity​

property
DetailPageEntity<T, EntityField>

isPending​

property
boolean

refreshEntity​

property
() => void

resetForm​

property
() => void