useShowContext

import { useShowContext, SimpleShowLayout, Show } from 'react-admin';
const PostShowLayout = () => {
 const { defaultTitle, error, isPending } = useShowContext();
 if (isPending) {
 return <div>Loading...</div>;
 }
 if (error) {
 return <div>Error!</div>;
 }
 return (
 <>
 <h1>{defaultTitle}</h1>
 <SimpleShowLayout>
 <TextField source="title" />
 ...
 </SimpleShowLayout>
 </>
 );
};
const PostShow = () => (
 <Show>
 <PostShowLayout />
 </Show>
)

const {
 defaultTitle, // Translated title based on the resource, e.g. 'Post #123'
 isPending, // Boolean, true until the record is available
 isFetching, // Boolean, true while the record is being fetched, and false once done fetching
 isLoading, // Boolean, true until the record is fetched for the first time
 record, // Either the record fetched via dataProvider.getOne() based on the id from the location, a cached version of the record (see also the Caching documentation page) or undefined 
 refetch, // Callback to refetch the record via dataProvider.getOne()
 resource, // The resource name, deduced from the location. e.g. 'posts'
 error, // Error returned by dataProvider when it failed to fetch the record. Useful if you want to adapt the view instead of just showing a notification using the onError side effect.
} = useShowContext();

import { Show, useShowContext } from 'react-admin';
import { Typography } from '@mui/material';
type Post = {
 id: number;
 title: string;
 updated_at: Date;
};
export const PostShow = () => (
 <Show aside={<Aside />}>
 // ...
 </Show>
);
const Aside = () => {
 const { record: post, isPending } = useShowContext<Post>();
 if (isPending) return null;
 return (
 <div>
 <Typography variant="h6">Posts stats</Typography>
 <Typography variant="body2">
 {/* TypeScript knows that post is of type Post */}
 Last edition: {post.updated_at}
 </Typography>
 </div>
 );
};