broad-brown
broad-brown15mo ago

hi i was wondering how i can use the refresh button from <show> of ant design on my custom buttons

make my custom button refresh the data onclick
3 Replies
kapa.ai
kapa.ai15mo ago
Hi @reactt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai15mo ago
---------------------- To create a custom button that refreshes the data onClick, you can use the <RefreshButton> component provided by refine. Here's an example of how to create a custom refresh button using the information from the extracts:
import { RefreshButton } from "@refinedev/mui"; // or use the appropriate package for your UI library

const MyCustomRefreshButton = () => {
return (
<RefreshButton
resource="posts"
recordItemId="1"
// Add your custom styling or properties here
>
{/* Add your custom button content here */}
</RefreshButton>
);
};
import { RefreshButton } from "@refinedev/mui"; // or use the appropriate package for your UI library

const MyCustomRefreshButton = () => {
return (
<RefreshButton
resource="posts"
recordItemId="1"
// Add your custom styling or properties here
>
{/* Add your custom button content here */}
</RefreshButton>
);
};
In this example, clicking the custom button will trigger the useOne (https://refine.dev/docs/api-reference/core/hooks/data/useOne/) method and fetch the record whose resource is "posts" and whose id is "1". The <RefreshButton> component reads the resource name and id information from the route by default, but you can also specify them using the resource and recordItemId properties. Remember to replace @refinedev/mui with the appropriate package for your UI library, such as @refinedev/antd, @refinedev/chakra-ui, or @refinedev/mantine. Sources: - RefreshButton MUI (https://refine.dev/docs/api-reference/mui/components/buttons/refresh-button) - RefreshButton AntD (https://refine.dev/docs/api-reference/antd/components/buttons/refresh-button) - RefreshButton Chakra-UI (https://refine.dev/docs/api-reference/chakra-ui/components/buttons/refresh-button) - RefreshButton Mantine (https://refine.dev/docs/api-reference/mantine/components/buttons/refresh-button) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
useOne | refine
useOne is an extended version of TanStack Query's useQuery. It supports all the features of useQuery and adds some extra features.
Refresh | refine
uses Material UI component to update the data shown on the page via the useOne method provided by your dataProvider.
Refresh | refine
uses Ant Design's component to update the data shown on the page via the useOne method provided by your dataProvider.
Refresh | refine
uses Chakra UI's component to update the data shown on the page via the useOne method provided by your dataProvider.
Refresh | refine
uses Mantine component to update the data shown on the page via the useOne method provided by your dataProvider.
kapa.ai
kapa.ai15mo ago
<@1048996483648725093> kapa.ai is still learning and improving, please let us how it did by reacting below