ratty-blush•2y ago

notification

hi when we do post request and add something for example we will get response from the back end 200 which is ok or 404 which is bad response in general we return message with the back end response is there a way to present the message in the notificationProvider ?

6 Replies

kapa.ai•2y ago

Hi @Deleted User. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, refine provides a way to present messages in the NotificationProvider using the errorNotification and successNotification properties in various hooks. These properties allow you to customize the notification message based on the response from the backend. For instance, if you're using the useOne hook and you want to show a success notification when data is fetched successfully, you can do so like this:

useOne({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});

useOne({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});

In this example, ${data.title} Successfully fetched. will be the message shown in the notification. You can customize this message based on your needs. Similarly, if you want to show an error notification when data fetching fails, you can do so like this:

useOne({  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Something went wrong when getting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

useOne({  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Something went wrong when getting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

In this example, Something went wrong when getting ${data.id} will be the message shown in the notification. Again, you can customize this message based on your needs. These properties are available in several hooks, including useOne, useMany, useAutocomplete, useShow, and useUpdateMany. You can find more details in the refine documentation (https://refine.dev/docs). Please note that the NotificationProvider is required for these properties to work. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

ratty-blushOP•2y ago

@kapa.ai NOTE: I use old version of refine

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In older versions of refine, you can use the notificationProvider to display notifications based on the response from the backend. The notificationProvider is an object with open and close methods that refine uses to show and hide notifications. These methods can be called from anywhere in the application with the useNotification hook. Here's an example of how you can define a notificationProvider:

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

const notificationProvider: NotificationProvider = {  
 open: (params) => {
   // You can customize this function to display the notification based on the params
 },  
 close: (key) => {
   // You can customize this function to close the notification with the given key
 },  
};

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

const notificationProvider: NotificationProvider = {  
 open: (params) => {
   // You can customize this function to display the notification based on the params
 },  
 close: (key) => {
   // You can customize this function to close the notification with the given key
 },  
};

The open method is invoked when refine wants to display a notification. It takes an object with the following shape as an argument:

interface OpenNotificationParams {  
 key?: string;  
 message: string;  
 type: "success" | "error" | "progress";  
 description?: string;  
 cancelMutation?: () => void;  
 undoableTimeout?: number;  
}

interface OpenNotificationParams {  
 key?: string;  
 message: string;  
 type: "success" | "error" | "progress";  
 description?: string;  
 cancelMutation?: () => void;  
 undoableTimeout?: number;  
}

The message property is the message to display on the notification, and the type property describes the type of the notification. A refine notification can be of type "success", "error", or "progress". You can then pass the notificationProvider to the <Refine> component like so:

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

const App = () => {  
 return (  
 <Refine  
 notificationProvider={notificationProvider}  
 /* ... */  
 >  
 {/* ... */}  
 </Refine>  
 );  
};

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

const App = () => {  
 return (  
 <Refine  
 notificationProvider={notificationProvider}  
 /* ... */  
 >  
 {/* ... */}  
 </Refine>  
 );  
};

For more information, you can refer to the refine documentation (https://refine.dev/docs/api-reference/core/providers/notification-provider). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

ratty-blushOP•2y ago

@Omer @alicanerdurmaz can you help please ?