Skip to main content
Version: 3.xx.xx

Refresh

<RefreshButton> uses Ant Design's <Button> component to update the data shown on the page via the useOne method provided by your dataProvider.

Usage​

import { useShow } from "@pankod/refine-core";
import {
RefreshButton,
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}
pageHeaderProps={{ extra: <RefreshButton /> }}
>
<Title level={5}>Id</Title>
<Text>{record?.id}</Text>

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

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

Will Look like this:

Default refresh button

Properties​

recordItemId​

recordItemId allows us to manage which data is going to be refreshed.

import { RefreshButton } from "@pankod/refine-antd";

export const MyRefreshComponent = () => {
return <RefreshButton resourceName="posts" recordItemId="1" />;
};

Clicking the button will trigger the useOne method and then fetches the record whose resource is "post" and whose id is "1".

note

<RefreshButton> component reads the id information from the route by default.

resourceNameOrRouteName​

resourceNameOrRouteName allows us to manage which resource is going to be refreshed.

import { RefreshButton } from "@pankod/refine-antd";

export const MyRefreshComponent = () => {
return <RefreshButton resourceNameOrRouteName="categories" recordItemId="2" />;
};

Clicking the button will trigger the useOne method and then fetches the record whose resource is "categories" and whose id is "2".

note

<RefreshButton> component reads the resource name from the route by default.

hideText​

It is used to show and not show the text of the button. When true, only the button icon is visible.

import { RefreshButton } from "@pankod/refine-antd";

export const MyRefreshComponent = () => {
return <RefreshButton hideText />;
};

API Reference​

Properties​

PropertyDescriptionTypeDefault
propsAnt Design button propsButtonProps & { resourceName?: string; recordItemId?: BaseKey; hideText?: boolean; }
resourceNameOrRouteNameDetermines which resource to use for redirectionstringResource name that it reads from route
resourceName
deprecated
Determines which resource to use for redirectionstringResource name that it reads from route
recordItemIdDetermines which id to use for refreshBaseKeyRecord id that it reads from route
hideTextAllows to hide button textbooleanfalse
childrenSets the button textReactNode"Refresh"
iconSets the icon component of buttonReactNode<RedoOutlined />
onClickSets the handler to handle the click event(event) => voidtrigger the useOne method for refresh
metaDataMetadata query for dataProviderMetaDataQuery{}