sensitive-blue
sensitive-blue12mo 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
kapa.ai12mo 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
kapa.ai12mo ago
<@791378338856828959> kapa.ai is still learning and improving, please let us how it did by reacting below
sensitive-blue
sensitive-blue12mo 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.
genetic-orange
genetic-orange12mo 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.