other-emerald•16mo 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•16mo 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•16mo 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•16mo ago

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

like-gold•16mo 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 🤔

like-gold•16mo ago

https://refine.dev/docs/api-reference/antd/components/buttons/refresh-button/ here is the docs for the refresh button

Refresh | refine

uses Ant Design's component to update the data shown on the page via the useOne method provided by your dataProvider.

like-gold•16mo ago

And the headerButtons prop in Show https://refine.dev/docs/api-reference/antd/components/basic-views/show/#headerbuttons

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.

other-emerald•16mo 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 . 🤯