Confirmation on mutate update

sad-indigo · 2024-03-25T19:46:29.908Z

How can i add Confirmation on mutate update for useUpdate

K

kapa.ai•3/25/24, 7:46 PM

Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•3/25/24, 7:46 PM

----------------------
The

useUpdate

useUpdate

hook in Refine does not directly support a confirmation mechanism. However, you can implement a confirmation step before calling the

mutate

mutate

mutate

mutate function from

useUpdate

useUpdate

. Here's a basic example:

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

const { mutate } = useUpdate();

const handleUpdate = (data) => {
  if (window.confirm("Are you sure you want to update this data?")) {
    mutate(data);
  }
};

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

const { mutate } = useUpdate();

const handleUpdate = (data) => {
  if (window.confirm("Are you sure you want to update this data?")) {
    mutate(data);
  }
};

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

const { mutate } = useUpdate();

const handleUpdate = (data) => {
  if (window.confirm("Are you sure you want to update this data?")) {
    mutate(data);
  }
};

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

const { mutate } = useUpdate();

const handleUpdate = (data) => {
  if (window.confirm("Are you sure you want to update this data?")) {
    mutate(data);
  }
};

In this example,

handleUpdate

handleUpdate

handleUpdate

handleUpdate is a function that shows a confirmation dialog. If the user confirms, it calls

mutate

mutate

mutate

mutate with the provided data.

Remember that the

useUpdate

useUpdate

hook also provides

successNotification

successNotification

successNotification

successNotification and

errorNotification

errorNotification

errorNotification

errorNotification props that allow you to customize the notifications shown when the update operation is successful or fails. You need to have

NotificationProvider

NotificationProvider

NotificationProvider

NotificationProvider for these props to work.

Here's an example of how you can use these props:

const { mutate } = useUpdate();  
  
mutate({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Something went wrong when getting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

const { mutate } = useUpdate();  
  
mutate({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Something went wrong when getting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

const { mutate } = useUpdate();  
  
mutate({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Something went wrong when getting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

const { mutate } = useUpdate();  
  
mutate({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `${data.title} Successfully fetched.`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Something went wrong when getting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

For more information, you can check the useUpdate documentation (https://refine.dev/docs/data/hooks/use-update/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•3/25/24, 7:46 PM

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