useShowContext

useShowContext grabs the data computed by useShowController when inside a <Show> or a <ShowBase> component.

Usage

You can use useShowContext inside show components to access the data computed by the controller.

import { useShowContext, ShowBase } from 'ra-core';
import { TextField } from './TextField';

const PostShowLayout = () => {
    const { defaultTitle, error, isPending } = useShowContext();

    if (isPending) {
        return <div>Loading...</div>;
    }

    if (error) {
        return <div>Error!</div>;
    }

    return (
        <>
            <h1>{defaultTitle}</h1>
            <div>
                <TextField source="title" />
                ...
            </div>
        </>
    );
};

const PostShow = () => (
    <ShowBase>
        <PostShowLayout />
    </ShowBase>
)

Return Value

useShowContext returns an object with the same keys as useShowController:

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();

TypeScript

The useShowContext hook accepts a generic parameter for the record type:

import { ShowBase, useShowContext } from 'ra-core';

type Post = {
    id: number;
    title: string;
    updated_at: Date;
};

export const PostShow = () => (
    <ShowBase aside={<Aside />}>
        // ...
    </ShowBase>
);

const Aside = () => {
    const { record: post, isPending } = useShowContext<Post>();
    if (isPending) return null;
    return (
        <div>
            <h6>Posts stats</h6>
            <p>
                {/* TypeScript knows that post is of type Post */}
                Last edition: {post.updated_at}
            </p>
        </div>
    );
};

See Also

• useShowController computes all the data that is located in the ShowContext.

API

• useShowContext
• useShowController