Skip to main content

DetailPage

DetailPage​

@vendure/dashboarddetail-page.tsx
v3.3.0

Auto-generates a detail page with a form based on the provided query and mutation documents.

For more control over the layout, you would use the more low-level Page component.

Signature
function DetailPage<T extends TypedDocumentNode<any, any>, C extends TypedDocumentNode<any, any>, U extends TypedDocumentNode<any, any>>(props: DetailPageProps<T, C, U>): void

Parameters

props​

parameter
DetailPageProps<T, C, U>

DetailPageProps​

@vendure/dashboarddetail-page.tsx
v3.3.0

Props to configure the DetailPage component.

Signature
interface DetailPageProps<T extends TypedDocumentNode<any, any>, C extends TypedDocumentNode<any, any>, U extends TypedDocumentNode<any, any>, EntityField extends keyof ResultOf<T> = DetailEntityPath<T>> {
    entityName?: string;
    pageId: string;
    route: AnyRoute;
    title: (entity: ResultOf<T>[EntityField]) => string;
    queryDocument: T;
    createDocument?: C;
    updateDocument: U;
    setValuesForUpdate: (entity: ResultOf<T>[EntityField]) => VariablesOf<U>['input'];
}

entityName​

property
string

The name of the entity. If not provided, it will be inferred from the query document.

pageId​

property
string

A unique identifier for the page.

route​

property
AnyRoute

The Tanstack Router route used to navigate to this page.

title​

property
(entity: ResultOf<T>[EntityField]) => string

The title of the page.

queryDocument​

property
T

The query document used to fetch the entity.

createDocument​

property
C

The mutation document used to create the entity.

updateDocument​

property
U

The mutation document used to update the entity.

setValuesForUpdate​

property
(entity: ResultOf<T>[EntityField]) => VariablesOf<U>['input']

A function that sets the values for the update input type based on the entity.