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
Hi @reactt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
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:
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
.<@1048996483648725093> kapa.ai is still learning and improving, please let us how it did by reacting below