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, 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'> {
    pageId?: string;
    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;
}

pageId​

property
string

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

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. If not provided, the function will try to infer it from the query document.

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>, 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