documentation/docs/ui-integrations/mantine/components/buttons/refresh-button/index.md
import * as React from "react";
const ShowPage = () => {
const { list } = RefineCore.useNavigation();
const params = RefineCore.useParsed();
return (
<div>
<MantineCore.Text italic color="dimmed" size="sm">
URL Parameters:
</MantineCore.Text>
<MantineCore.Code>{JSON.stringify(params, null, 2)}</MantineCore.Code>
<MantineCore.Space h="md" />
<MantineCore.Button
size="xs"
variant="outline"
onClick={() => list("posts")}
>
Go back
</MantineCore.Button>
</div>
);
};
<RefreshButton> uses Mantine <Button> component to update the data shown on the page via the useInvalidate hook.
:::simple Good to know
You can swizzle this component with the Refine CLI to customize it.
:::
setInitialRoutes(["/posts/show/123"]);
import * as React from "react";
// visible-block-start
import { useShow } from "@refinedev/core";
import { Show, MarkdownField, RefreshButton } from "@refinedev/mantine";
import { Title, Text } from "@mantine/core";
const PostShow: React.FC = () => {
const { result: post, query } = useShow<IPost>();
const { data, isLoading } = query;
return (
// highlight-next-line
<Show headerButtons={<RefreshButton />} isLoading={isLoading}>
<Title order={5}>Id</Title>
<Text mt="sm">{post?.id}</Text>
<Title mt="sm" order={5}>
Title
</Title>
<Text mt="sm">{post?.title}</Text>
<Title mt="sm" order={5}>
Content
</Title>
<MarkdownField value={post?.content} />
</Show>
);
};
// visible-block-end
interface IPost {
id: number;
title: string;
content: string;
}
render(
<ReactRouter.BrowserRouter>
<RefineMantineDemo
resources={[
{
name: "posts",
list: "/posts",
show: "/posts/show/:id",
},
]}
>
<ReactRouter.Routes>
<ReactRouter.Route
path="/posts"
element={
<div style={{ padding: 16 }}>
<ReactRouter.Outlet />
</div>
}
>
<ReactRouter.Route
index
element={
<div>
<p>This page is empty.</p>
<MantineCore.Button
component={RefineCore.Link}
to="/posts/show/123"
variant="light"
>
Show Item 123
</MantineCore.Button>
</div>
}
/>
<ReactRouter.Route path="show/:id" element={<PostShow />} />
</ReactRouter.Route>
</ReactRouter.Routes>
</RefineMantineDemo>
</ReactRouter.BrowserRouter>,
);
recordItemId allows us to manage which data is going to be refreshed. By default, it will read the record id from the route parameters.
setInitialRoutes(["/posts"]);
import * as React from "react";
// visible-block-start
import { RefreshButton } from "@refinedev/mantine";
const MyRefreshComponent = () => {
return <RefreshButton recordItemId="123" />;
};
// visible-block-end
render(
<ReactRouter.BrowserRouter>
<RefineMantineDemo
resources={[
{
name: "posts",
list: "/posts",
},
]}
>
<ReactRouter.Routes>
<ReactRouter.Route
path="/posts"
element={
<div style={{ padding: 16 }}>
<ReactRouter.Outlet />
</div>
}
>
<ReactRouter.Route index element={<MyRefreshComponent />} />
</ReactRouter.Route>
</ReactRouter.Routes>
</RefineMantineDemo>
</ReactRouter.BrowserRouter>,
);
Clicking the button will trigger the useInvalidate hook and then fetch the record whose resource is "post" and whose id is "123".
resource allows us to manage which resource is going to be refreshed. By default, it will read the resource from the current route.
setInitialRoutes(["/posts"]);
import * as React from "react";
// visible-block-start
import { RefreshButton } from "@refinedev/mantine";
const MyRefreshComponent = () => {
return (
<RefreshButton
// highlight-next-line
resource="categories"
// highlight-next-line
recordItemId="2"
/>
);
};
// visible-block-end
render(
<ReactRouter.BrowserRouter>
<RefineMantineDemo
resources={[
{
name: "posts",
list: "/posts",
},
{
name: "categories",
list: "/categories",
},
]}
>
<ReactRouter.Routes>
<ReactRouter.Route
path="/posts"
element={
<div style={{ padding: 16 }}>
<ReactRouter.Outlet />
</div>
}
>
<ReactRouter.Route index element={<MyRefreshComponent />} />
</ReactRouter.Route>
</ReactRouter.Routes>
</RefineMantineDemo>
</ReactRouter.BrowserRouter>,
);
Clicking the button will trigger the useInvalidate hook and then fetches the record whose resource is "categories" and whose id is "2".
If you have multiple resources with the same name, you can pass the identifier instead of the name of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the name of the resource defined in the <Refine/> component.
For more information, refer to the
identifiersection of the<Refine/>component documentation →
hideText is used to show and not show the text of the button. When true, only the button icon is visible.
setInitialRoutes(["/posts"]);
import * as React from "react";
// visible-block-start
import { RefreshButton } from "@refinedev/mantine";
const MyRefreshComponent = () => {
return <RefreshButton hideText recordItemId="123" />;
};
// visible-block-end
render(
<ReactRouter.BrowserRouter>
<RefineMantineDemo
resources={[
{
name: "posts",
list: "/posts",
},
]}
>
<ReactRouter.Routes>
<ReactRouter.Route
path="/posts"
element={
<div style={{ padding: 16 }}>
<ReactRouter.Outlet />
</div>
}
>
<ReactRouter.Route index element={<MyRefreshComponent />} />
</ReactRouter.Route>
</ReactRouter.Routes>
</RefineMantineDemo>
</ReactRouter.BrowserRouter>,
);