firm-tan
firm-tan14mo ago

Refresh button not working with GraphQL

Hello, On the show or edit page I have specified the list of fields to be requested from GraphQl call and that works. But when I hit refresh button a new graphql call is made without requesting any field to be returned and therefore is rejected by the server. const {queryResult} = useShow({ meta: { fields: ['id', 'lang', 'type', 'tag'], }, }); why is clicking on the refresh on edit or show page does not reuse the meta fields already provided? it seems that is using useOne() hook. but how do i customize that? is there an example that can point me toward. Thanks
7 Replies
kapa.ai
kapa.ai14mo ago
Hi @davidd4309. 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.ai14mo ago
---------------------- Hello, When using the <Show> component, it includes the <RefreshButton> (https://refine.dev/docs/api-reference/antd/components/buttons/refresh-button/) by default. To refresh the data on the page, you can pass the refetch method of queryResult to the onClick of the <RefreshButton>. Here's an example of how to do this:
export const PostShow: React.FC = () => {
const { queryResult } = useShow<IPost>({
resource: "posts",
meta: {
fields: ["id", "title", { category: ["title"] }, "content"],
},
});
const { data, isLoading } = queryResult;
const record = data?.data;

return (
<Show
isLoading={isLoading}
headerProps={{
extra: <RefreshButton onClick={() => queryResult.refetch()} />,
}}
>
// Your fields rendering here
</Show>
);
};
export const PostShow: React.FC = () => {
const { queryResult } = useShow<IPost>({
resource: "posts",
meta: {
fields: ["id", "title", { category: ["title"] }, "content"],
},
});
const { data, isLoading } = queryResult;
const record = data?.data;

return (
<Show
isLoading={isLoading}
headerProps={{
extra: <RefreshButton onClick={() => queryResult.refetch()} />,
}}
>
// Your fields rendering here
</Show>
);
};
In this example, the refetch method of queryResult is passed to the onClick of the <RefreshButton>. This method repeats the last request made by the query, so it should refresh the data shown on the page with the specified fields in the meta object. If you still face issues with the refresh button not reusing the meta fields, it might be a bug or an edge case that needs further investigation. In that case, I recommend reaching out to the refine community or opening an issue on their GitHub repository. I hope this helps! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Refresh | refine
uses Ant Design's component to update the data shown on the page via the useOne method provided by your dataProvider.
kapa.ai
kapa.ai14mo ago
<@542609011220938753> kapa.ai is still learning and improving, please let us how it did by reacting below
robust-apricot
robust-apricot14mo ago
Hey @davidd4309 this is one of the missing features that is currently in our to do list and will be developed as soon as possible. The default RefreshButton in the Show component does not receive meta. You can use headerButtons prop to override the defaults and while doing so you can provide meta to the buttons 🤔
robust-apricot
robust-apricot14mo ago
Refresh | refine
uses Ant Design's component to update the data shown on the page via the useOne method provided by your dataProvider.
robust-apricot
robust-apricot14mo ago
Show | refine
`` provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button or giving title to the page.
firm-tan
firm-tan14mo ago
ok. great. that was very helpful and it worked. i am glad you are making this the default behaviour. Thanks It is amazing that this kapa.ai came up with the correct solution . 🤯