dependent-tan•14mo ago

MUI - Refresh Button not working as expected

Hi there, it seems that the refresh Button for the <Show> Component is broken. When changing somethin in the persistence layer manually, the displayed data is not refreshed. The problems occurs while using the Inferencer as well as a using a hand crafted component (following https://refine.dev/docs/api-reference/mui/components/buttons/refresh-button/) Maybe someone can help? Thanks, Tim

4 Replies

kapa.ai•14mo ago

Hi @zaibatsu84. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hi Tim, Based on the information provided in the extracts, the <RefreshButton> component is used to update the data shown on the page via the useOne method provided by your dataProvider. If the data is not being refreshed, it could be due to an issue with the dataProvider or the way the <RefreshButton> is implemented. To help you troubleshoot the issue, here's an example of how to use the <RefreshButton> with the <Show> component from the extract (https://refine.dev/docs/api-reference/mui/components/buttons/refresh-button/):

import { useShow } from "@refinedev/core";  
import { Show, RefreshButton } from "@refinedev/mui";  
import { Typography, Stack } from "@mui/material";  
  
const PostShow: React.FC = () => {  
 const { queryResult } = useShow<IPost>();  
 const { data, isLoading } = queryResult;  
 const record = data?.data;  
  
 return (  
 <Show  
 isLoading={isLoading}  
 headerButtons={  
 <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;  
}

import { useShow } from "@refinedev/core";  
import { Show, RefreshButton } from "@refinedev/mui";  
import { Typography, Stack } from "@mui/material";  
  
const PostShow: React.FC = () => {  
 const { queryResult } = useShow<IPost>();  
 const { data, isLoading } = queryResult;  
 const record = data?.data;  
  
 return (  
 <Show  
 isLoading={isLoading}  
 headerButtons={  
 <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;  
}

Make sure you have implemented the <RefreshButton> correctly in your <Show> component. If the issue persists, you may need to check your dataProvider implementation to ensure it's working as expected. If you still face issues, please provide more information or code snippets to help diagnose the problem better. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@791378338856828959> kapa.ai is still learning and improving, please let us how it did by reacting below

dependent-tan•14mo ago

that's acctually exactly what i've tried. In fact i can see in the developer console, that the a GET-Request is fired, whiches fetches the new data. But the UI doesn't update afterwards. i did some further testing an i can reproduce the behaviour even in a vanilla refine Project with the latest released 4.x version. I think this is a bug.

harsh-harlequin•14mo ago

Can you create an issue about this issue by sharing the way we will reproduce or the project on codesandbox or a repo you reproduce? It seems like a bug, but I couldn't picture it in my head.