*** title: "UseDetailPage" generated: true --------------- ## useDetailPage **Status: Developer Preview** This hook is used to create an entity detail page which can read and update an entity. *Example* ```ts 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', }); }, }); ``` ```ts title="Signature" function useDetailPage, C extends TypedDocumentNode, U extends TypedDocumentNode, EntityField extends keyof ResultOf = keyof ResultOf, VarNameUpdate extends keyof VariablesOf = 'input', VarNameCreate extends keyof VariablesOf = 'input'>(options: DetailPageOptions): UseDetailPageResult ``` Parameters ### options \DetailPageOptions`} /> ## DetailPageOptions Options used to configure the result of the `useDetailPage` hook. ```ts title="Signature" interface DetailPageOptions, C extends TypedDocumentNode, U extends TypedDocumentNode, EntityField extends keyof ResultOf = DetailEntityPath, VarNameCreate extends keyof VariablesOf = 'input', VarNameUpdate extends keyof VariablesOf = 'input'> { pageId?: string; queryDocument: T; entityField?: EntityField; params: { id: string; }; entityName?: string; createDocument?: C; updateDocument?: U; setValuesForUpdate: ( entity: NonNullable[EntityField]>, ) => WithLooseCustomFields[VarNameUpdate]>; transformCreateInput?: (input: VariablesOf[VarNameCreate]) => VariablesOf[VarNameCreate]; transformUpdateInput?: (input: VariablesOf[VarNameUpdate]) => VariablesOf[VarNameUpdate]; extendSchema?: (schema: ZodObject) => ZodTypeAny; onSuccess?: (entity: ResultOf[keyof ResultOf] | ResultOf[keyof ResultOf]) => void; onError?: (error: unknown) => void; } ```
### pageId \ The page id. This is optional, but if provided, it will be used to identify the page when extending the detail page query ### queryDocument \ The query document to fetch the entity. ### entityField \ The field of the query document that contains the entity. ### params \ The parameters used to identify the entity. ### entityName \ 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 \ The document to create the entity. ### updateDocument \ The document to update the entity. ### setValuesForUpdate \[EntityField]>, ) => WithLooseCustomFields[VarNameUpdate]>`} /> The function to set the values for the update document. ### transformCreateInput \[VarNameCreate]) => VariablesOf[VarNameCreate]`} /> ### transformUpdateInput \[VarNameUpdate]) => VariablesOf[VarNameUpdate]`} /> ### extendSchema \) => ZodTypeAny`} since="3.7.0" /> Refines the auto-generated Zod schema for this page's form. Use this to declare the fields the user must actually fill in. The generated schema is derived from the GraphQL input type, which only expresses nullability — and nullability tells you nothing about whether a value is required: * A non-nullable field may still be legitimately empty. `String!` means "not null", not "not empty", and a non-nullable `ID!` such as `CreateFacetValueInput.facetId` may be supplied by the page in `transformCreateInput` rather than by the user. * A nullable field may still be required by the server. `CreateChannelInput. defaultCurrencyCode` is nullable, yet `ChannelService.create` rejects the input unless it is set. So required-ness is declared per page, here. *Example* ```ts extendSchema: schema => schema.extend({ code: z.string().min(1, { message: t`This field is required` }), }), ``` ### onSuccess \[keyof ResultOf] | ResultOf[keyof ResultOf]) => void`} /> The function to call when the update is successful. ### onError \ void`} /> The function to call when the update is successful.
## UseDetailPageResult ```ts title="Signature" interface UseDetailPageResult, U extends TypedDocumentNode, EntityField extends keyof ResultOf> { form: UseFormReturn['input']>>; submitHandler: (event: FormEvent) => void; entity?: DetailPageEntity; isPending: boolean; refreshEntity: () => void; resetForm: () => void; } ```
### form \['input']>>`} /> ### submitHandler \) => void`} /> ### entity \`} /> ### isPending \ ### refreshEntity \ void`} /> ### resetForm \ void`} />