DetailPage

DetailPage

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.

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

<MemberInfo kind="parameter" type={<a href='/reference/dashboard/detail-views/detail-page#detailpageprops'>DetailPageProps</a><T, C, U>} />

DetailPageProps

Props to configure the DetailPage component.

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

<MemberInfo kind="property" type={string} />

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

pageId

<MemberInfo kind="property" type={string} />

A unique identifier for the page.

route

<MemberInfo kind="property" type={AnyRoute} />

The TanStack Router route used to navigate to this page.

title

<MemberInfo kind="property" type={(entity: ResultOf<T>[EntityField]) => string} />

The title of the page.

queryDocument

<MemberInfo kind="property" type={T} />

The query document used to fetch the entity.

createDocument

<MemberInfo kind="property" type={C} />

The mutation document used to create the entity.

updateDocument

<MemberInfo kind="property" type={U} />

The mutation document used to update the entity.

setValuesForUpdate

<MemberInfo kind="property" type={(entity: ResultOf<T>[EntityField]) => VariablesOf<U>['input']} />

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