Skip to main content
Version: 3.xx.xx

useShow

useShow hook allows you to fetch the desired record. It uses getOne method as query function from the dataProvider that is passed to <Refine>.

const { queryResult } = useShow();

When no property is given, it tries to read the resource and id information from the route.

Usage​

First, we'll create a page to show the records. Then we'll use this page for the show property of the resource.

src/pages/posts/show.tsx
import { useShow } from "@pankod/refine-core";
import { Show, Typography } from "@pankod/refine-antd";

const { Title, Text } = Typography;

export const PostShow: React.FC = () => {
const { queryResult } = useShow<IPost>();
const { data, isLoading } = queryResult;
const record = data?.data;

return (
<Show isLoading={isLoading}>
<Title level={5}>Id</Title>
<Text>{record?.id}</Text>

<Title level={5}>Title</Title>
<Text>{record?.title}</Text>
</Show>
);
};

interface IPost {
id: number;
title: string;
}

We didn't give any property to useShow because it can read resource and id information from the route.

src/App.tsx
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-json-server";

import { PostShow } from "./pages/posts";

export const App: React.FC = () => {
return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
resources={[{ name: "posts", show: PostShow }]}
/>
);
};
useShow Basic Usage

In the next example, we'll show how it is used for the modal.

Let's simply create a post list showing posts.

src/pages/posts/list.tsx
import { List, Table, useTable } from "@pankod/refine-antd";

export const PostList: React.FC = () => {
const { tableProps } = useTable<IPost>();

return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="title" title="Title" />
</Table>
</List>
);
};

Let's add our modal.

src/pages/posts/list.tsx
import { List, Table, useTable } from "@pankod/refine-core";
import {
List,
Table,
useTable,
Modal,
Show,
ShowButton,
Typography,
} from "@pankod/refine-antd";

const { Title, Text } = Typography;

export const PostList: React.FC = () => {
const [visible, setVisible] = useState(false);

const { tableProps } = useTable<IPost>();

const { queryResult, showId, setShowId } = useShow<IPost>();
const { data, isLoading } = queryResult;
const record = data?.data;

return (
<>
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="title" title="Title" />
<Table.Column<IPost>
title="Actions"
dataIndex="actions"
render={(_, record) => (
<ShowButton
size="small"
recordItemId={record.id}
onClick={() => {
setShowId(record.id);
setVisible(true);
}}
/>
)}
/>
</Table>
</List>
<Modal visible={visible} onCancel={() => setVisible(false)}>
<Show isLoading={isLoading} recordItemId={showId}>
<Title level={5}>Id</Title>
<Text>{record?.id}</Text>

<Title level={5}>Title</Title>
<Text>{record?.title}</Text>
</Show>
</Modal>
</>
);
};

Finally, let's pass this page to the resources as a list component.

src/App.tsx
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-json-server";

import { PostList } from "./pages/posts";

export const App: React.FC = () => {
return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
resources={[{ name: "posts", list: PostList }]}
/>
);
};
useShow Modal Usage

tip

To show data in the drawer, you can do it by simply replacing <Modal> with <Drawer>.

API Reference​

Properties​

PropertyDescriptionTypeDefault
resourceResource name for API data interactionsstringResource name that it reads from the url
idRecord id for fetchingBaseKeyId that it reads from the URL
metaDataMetadata query for dataProviderMetaDataQuery{}
dataProviderNameIf there is more than one dataProvider, you should use the dataProviderName that you will use.stringdefault
liveModeWhether to update data automatically ("auto") or not ("manual") if a related live event is received. The "off" value is used to avoid creating a subscription."auto" | "manual" | "off""off"
liveParamsParams to pass to liveProvider's subscribe method if liveMode is enabled.{ ids?: BaseKey[]; [key: string]: any; }undefined
onLiveEventCallback to handle all related live events of this hook.(event: LiveEvent) => voidundefined

Return values​

PropertyDescriptionType
queryResultResult of the query of a recordQueryObserverResult<{ data: TData }>
showIdRecord idstring
setShowIdshowId setterDispatch<SetStateAction< string | undefined>>