Detail Show Context

DetailShowContext fetches and provides a single entity’s data to all components on the detail/show page. All detail page components (GeneralDetails, Associations, AdditionalInformationSection) read from this context.

Import


import { DetailShowContext } from "@phpcreation/frontend-crud-react-nextjs-bundle/contexts/DetailShowContext";

What It Provides

Value	Description
`data`	The full entity object from the API
`loading`	Loading state
`error`	Error state
`refresh`	Function to re-fetch entity data

Usage


import { DetailShowContext } from "...";
import { GeneralDetails } from "...";
import { DetailActions } from "...";
 
<DetailShowContext entityConfig={entityConfig} id={params.id}>
  <DetailActions actions={entityDetailActions} />
  <GeneralDetails fields={entityDetailFields} />
</DetailShowContext>

useDetailShowContext Hook


import { useDetailShowContext } from "@phpcreation/frontend-crud-react-nextjs-bundle/contexts/DetailShowContext";
 
function MyPanel() {
  const { data, loading, refresh } = useDetailShowContext();
 
  if (loading) return <Skeleton />;
  return <div>{data.name}</div>;
}

Custom Properties

The entity API response includes a customPropertiesListing URL when custom properties are enabled. AdditionalInformationSection reads this from data.customPropertiesListing automatically.

Call refresh() after any mutation (edit, delete child entity) to re-fetch the entity and update all panels.