Skip to main content
Version: 3.xx.xx

Refresh

<RefreshButton> uses Material UI <Button> component to update the data shown on the page via the useOne method provided by your dataProvider.

Usage​

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

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

return (
<Show
isLoading={isLoading}
cardHeaderProps={{
action: (
<RefreshButton />
),
}}
>
<Typography fontWeight="bold">Id</Typography>
<Typography>{record?.id}</Typography>
<Typography fontWeight="bold">Title</Typography>
<Typography>{record?.title}</Typography>
</Show>
);
};

interface IPost {
id: number;
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-mui";

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-mui";

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-mui";

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

API Reference​

Properties​

PropertyDescriptionTypeDefault
propsButtonProps
resourceNameOrRouteNameDetermines which resource to use for redirectionstringResource name that it reads from route
hideTextAllows to hide button textbooleanfalse
recordItemIdDetermines which id to use for refreshBaseKeyRecord id that it reads from route
dataProviderNameIf there is more than one dataProvider, you should use the dataProviderName that you will use.stringdefault
metaDataMetadata query for dataProviderMetaDataQuery{}
childrenSets the button textReactNodeHumanized resource name that it reads from route
startIconSets the icon component of buttonReactNode<RefreshOutlinedIcon />
svgIconPropsAllows to set icon propsSvgIconProps
onClickSets the handler to handle click event(event) => voidTriggers navigation for redirection to the list page of resource