absent-sapphire•3h ago

how to use antd notification for custom apis in page

2 Replies

Hi @jakshire01. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use Ant Design notifications for custom API calls in a Refine page, you should: 1. Set up Refine with Ant Design's notification provider
Make sure your app is wrapped with the Ant Design theme and the useNotificationProvider from @refinedev/antd is passed to the notificationProvider prop of <Refine />:

   import { Refine } from "@refinedev/core";
   import { useNotificationProvider, RefineThemes } from "@refinedev/antd";
   import { ConfigProvider, App as AntdApp } from "antd";

   const App = () => (
     <ConfigProvider theme={RefineThemes.Blue}>
       <AntdApp>
         <Refine notificationProvider={useNotificationProvider}>
           {/* ... */}
         </Refine>
       </AntdApp>
     </ConfigProvider>
   );

   import { Refine } from "@refinedev/core";
   import { useNotificationProvider, RefineThemes } from "@refinedev/antd";
   import { ConfigProvider, App as AntdApp } from "antd";

   const App = () => (
     <ConfigProvider theme={RefineThemes.Blue}>
       <AntdApp>
         <Refine notificationProvider={useNotificationProvider}>
           {/* ... */}
         </Refine>
       </AntdApp>
     </ConfigProvider>
   );

Ant Design Introduction - Notifications 2. Use the useNotification hook in your page
The useNotification hook gives you access to the open and close methods for notifications. You can call these methods after your custom API logic:

   import { useNotification } from "@refinedev/core";
   import { Button } from "antd";

   export const MyCustomApiPage = () => {
     const { open } = useNotification();

     const handleCustomApi = async () => {
       try {
         // Your custom API call
         await fetch("/api/my-endpoint");
         open?.({
           type: "success",
           message: "API Success",
           description: "Your custom API call was successful.",
         });
       } catch (error) {
         open?.({
           type: "error",
           message: "API Error",
           description: "There was an error with your custom API call.",
         });
       }
     };
return (
       <Button onClick={handleCustomApi}>Call Custom API</Button>
     );
   };

   import { useNotification } from "@refinedev/core";
   import { Button } from "antd";

   export const MyCustomApiPage = () => {
     const { open } = useNotification();

     const handleCustomApi = async () => {
       try {
         // Your custom API call
         await fetch("/api/my-endpoint");
         open?.({
           type: "success",
           message: "API Success",
           description: "Your custom API call was successful.",
         });
       } catch (error) {
         open?.({
           type: "error",
           message: "API Error",
           description: "There was an error with your custom API call.",
         });
       }
     };
return (
       <Button onClick={handleCustomApi}>Call Custom API</Button>
     );
   };

Built-in Notification Providers - Ant Design Example 3. (Optional) Customize notifications in data hooks
If you use Refine's data hooks like useCustomMutation for your API, you can pass successNotification and errorNotification props to customize notifications:

   import { useCustomMutation } from "@refinedev/core";

   const { mutate } = useCustomMutation();

   mutate({
     url: "/api/my-endpoint",
     method: "post",
     values: { foo: "bar" },
     successNotification: () => ({
       message: "Custom API Success",
       description: "Data was sent successfully.",
       type: "success",
     }),
     errorNotification: () => ({
       message: "Custom API Error",
       description: "Failed to send data.",
       type: "error",
     }),
   });

   import { useCustomMutation } from "@refinedev/core";

   const { mutate } = useCustomMutation();

   mutate({
     url: "/api/my-endpoint",
     method: "post",
     values: { foo: "bar" },
     successNotification: () => ({
       message: "Custom API Success",
       description: "Data was sent successfully.",
       type: "success",
     }),
     errorNotification: () => ({
       message: "Custom API Error",
       description: "Failed to send data.",
       type: "error",
     }),
   });

useCustomMutation - successNotification and errorNotification Summary:
- Set up notificationProvider={useNotificationProvider} in <Refine />. - Use useNotification in your page to show notifications after custom API calls. - Or, use successNotification/errorNotification in Refine data hooks for automatic notifications. This approach ensures your notifications are consistent with Ant Design and fully integrated with Refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3h ago

<@418995770205929473> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

how to use antd notification for custom apis in page

Did you find this page helpful?