use api message for notification

How can i use the api response message for notifciaton of create and edit

11 Replies

Hi @jash.s. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can use the API response message for notifications in Refine by customizing the successNotification and errorNotification props in the useForm or useCreate hooks. These props allow you to define the message that will be shown when the mutation is successful or fails. Here's an example of how you can do this:

useForm({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `Successfully created ${data.title}`,  
 description: "good job!",  
 type: "success",  
 };  
 },  
 errorNotification: (error, values, resource) => {  
 return {  
 message: `Failed to create ${values.title}`,  
 description: error.message,  
 type: "error",  
 };  
 },  
});

useForm({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `Successfully created ${data.title}`,  
 description: "good job!",  
 type: "success",  
 };  
 },  
 errorNotification: (error, values, resource) => {  
 return {  
 message: `Failed to create ${values.title}`,  
 description: error.message,  
 type: "error",  
 };  
 },  
});

In the successNotification prop, data is the response from the API. You can use data.message (or any other property from the response) to show the API response message in the notification. Similarly, in the errorNotification prop, error is the error object from the API. You can use error.message to show the error message from the API in the notification. Please note that NotificationProvider (https://refine.dev/docs/notification/notification-provider/) is required for these props to work. For more information, you can check the documentation here (https://refine.dev/docs/data/hooks/use-form#successnotification-) and here (https://refine.dev/docs/data/hooks/use-form#errornotification-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

conscious-sapphire•6mo ago

@kapa.ai can i make this changes in ii8 like this ? "createSuccess": "{{message}}",

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can customize the notification messages using i18n in Refine. However, the {{message}} placeholder you're using might not work as expected because it's not a standard key that Refine recognizes. Refine uses the following translation keys for notification titles:

"notifications": {
  "success": "Successful",
  "error": "Error (status code: {{statusCode}})",
  "undoable": "You have {{seconds}} seconds to undo",
  "createSuccess": "Successfully created {{resource}}",
  "createError": "There was an error creating {{resource}} (status code: {{statusCode}})",
  "deleteSuccess": "Successfully deleted {{resource}}",
  "deleteError": "Error when deleting {{resource}} (status code: {{statusCode}})",
  "editSuccess": "Successfully edited {{resource}}",
  "editError": "Error when editing {{resource}} (status code: {{statusCode}})",
  "importProgress": "Importing: {{processed}}/{{total}}"
}

"notifications": {
  "success": "Successful",
  "error": "Error (status code: {{statusCode}})",
  "undoable": "You have {{seconds}} seconds to undo",
  "createSuccess": "Successfully created {{resource}}",
  "createError": "There was an error creating {{resource}} (status code: {{statusCode}})",
  "deleteSuccess": "Successfully deleted {{resource}}",
  "deleteError": "Error when deleting {{resource}} (status code: {{statusCode}})",
  "editSuccess": "Successfully edited {{resource}}",
  "editError": "Error when editing {{resource}} (status code: {{statusCode}})",
  "importProgress": "Importing: {{processed}}/{{total}}"
}

You can customize these messages as per your requirements. For example, you can change the createSuccess message like this:

"createSuccess": "{{resource}} has been created successfully"

"createSuccess": "{{resource}} has been created successfully"

In this case, {{resource}} is a placeholder that Refine will replace with the actual resource name. For more information, you can check the documentation here (https://refine.dev/docs/guides-concepts/notifications#notification-providers). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

conscious-sapphire•6mo ago

@kapa.ai can i make a notification provider which takes the message from api response and use it as the success or error notitication

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can create a custom notification provider that uses the message from the API response for success or error notifications. You can do this by customizing the successNotification and errorNotification props in the data fetching or mutation hooks. Here's an example of how you can do this:

useForm({  
 successNotification: (data, values, resource) => {  
 return {  
 message: data.message, // Use the message from the API response
 description: "Operation successful",  
 type: "success",  
 };  
 },  
 errorNotification: (error, values, resource) => {  
 return {  
 message: error.message, // Use the error message from the API response
 description: "Operation failed",  
 type: "error",  
 };  
 },  
});

useForm({  
 successNotification: (data, values, resource) => {  
 return {  
 message: data.message, // Use the message from the API response
 description: "Operation successful",  
 type: "success",  
 };  
 },  
 errorNotification: (error, values, resource) => {  
 return {  
 message: error.message, // Use the error message from the API response
 description: "Operation failed",  
 type: "error",  
 };  
 },  
});

kapa.ai•6mo ago

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

conscious-sapphire•6mo ago

@kapa.ai how can i use identifier value in place of resource for the below "notifications": { "success": "Successful", "error": "Error (status code: {{statusCode}})", "undoable": "You have {{seconds}} seconds to undo", "createSuccess": "Successfully created {{resource}}", "createError": "There was an error creating {{resource}} (status code: {{statusCode}})", "deleteSuccess": "Successfully deleted {{resource}}", "deleteError": "Error when deleting {{resource}} (status code: {{statusCode}})", "editSuccess": "Successfully edited {{resource}}", "editError": "Error when editing {{resource}} (status code: {{statusCode}})", "importProgress": "Importing: {{processed}}/{{total}}" }

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In the context of Refine's i18n notifications, the {{resource}} placeholder is used to represent the name of the resource that the operation is being performed on. If you want to use the identifier value instead of the resource name, you would need to pass the identifier value when calling the data hooks. However, the {{resource}} placeholder in the notification messages is automatically replaced by Refine with the name of the resource. There's no direct way to replace it with the identifier value in the i18n notification messages. If you want to use the identifier value in the notification messages, you would need to handle it manually in the successNotification and errorNotification props when calling the data hooks. Here's an example:

useForm({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `Successfully created ${resource.identifier}`, // Use the identifier value
 description: "Operation successful",  
 type: "success",  
 };  
 },  
 errorNotification: (error, values, resource) => {  
 return {  
 message: `Failed to create ${resource.identifier}`, // Use the identifier value
 description: error.message,  
 type: "error",  
 };  
 },  
});

useForm({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `Successfully created ${resource.identifier}`, // Use the identifier value
 description: "Operation successful",  
 type: "success",  
 };  
 },  
 errorNotification: (error, values, resource) => {  
 return {  
 message: `Failed to create ${resource.identifier}`, // Use the identifier value
 description: error.message,  
 type: "error",  
 };  
 },  
});

In this case, resource.identifier should be the identifier value of the resource. For more information, you can check the documentation here (https://refine.dev/docs/data/hooks/use-form#successnotification-) and here (https://refine.dev/docs/data/hooks/use-form#errornotification-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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