helpful-purple•10mo ago

Disable notifications in useCreateMany and useCreate

Is it possible to turn off notification and setup custom notifications for useCreateMany and useCreate const { mutate: createMenuItem } = useCreate(); const { mutate: createManyAllergens } = useCreateMany(); const onSubmit = async (formData) => { createMenuItem( { resource: "menuitems", values: { name: formData.name, description: formData.description, price: formData.price, category_id: formData.category_id, }, meta: { select: "*", }, }, { onSuccess: (data) => { const menuItemId = data.data.id; // Prepare the allergen associations for bulk creation const allergenAssociations = (formData.allergens || []).map( (allergenId: number) => ({ menu_item_id: menuItemId, allergen_id: allergenId, }) ); if (allergenAssociations.length > 0) { createManyAllergens( { resource: "menuitemallergens", values: allergenAssociations, }, { onSuccess: () => { console.log("Allergen associations created successfully."); }, onError: (error) => { console.error("Error creating allergen associations:", error); }, } ); } else { console.log("No allergens to associate with the menu item."); } }, } ); };

11 Replies

kapa.ai•10mo ago

Hi @GooglyEyes. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to set up custom notifications for useCreateMany and useCreate hooks in Refine. You can use the successNotification and errorNotification props to customize the notifications that show up when the data is fetched successfully or when the data fetching fails respectively. For useCreateMany, you can set up custom notifications like this:

const { mutate: createManyAllergens } = useCreateMany();

createManyAllergens(
  {
    resource: "menuitemallergens",
    values: allergenAssociations,
  },
  {
    onSuccess: () => {
      console.log("Allergen associations created successfully.");
    },
    onError: (error) => {
      console.error("Error creating allergen associations:", error);
    },
    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: createManyAllergens } = useCreateMany();

createManyAllergens(
  {
    resource: "menuitemallergens",
    values: allergenAssociations,
  },
  {
    onSuccess: () => {
      console.log("Allergen associations created successfully.");
    },
    onError: (error) => {
      console.error("Error creating allergen associations:", error);
    },
    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 useCreate, you can set up custom notifications like this:

const { mutate: createMenuItem } = useCreate();
createMenuItem(
  {
    resource: "menuitems",
    values: {
      name: formData.name,
      description: formData.description,
      price: formData.price,
      category_id: formData.category_id,
    },
    meta: {
      select: "*",
    },
  },
  {
    onSuccess: (data) => {
      // Your code here
    },
    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: createMenuItem } = useCreate();
createMenuItem(
  {
    resource: "menuitems",
    values: {
      name: formData.name,
      description: formData.description,
      price: formData.price,
      category_id: formData.category_id,
    },
    meta: {
      select: "*",
    },
  },
  {
    onSuccess: (data) => {
      // Your code here
    },
    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",
      };
    },
  }
);

Please note that NotificationProvider (https://refine.dev/docs/notification/notification-provider/) is required for these props to work. Sources: - useCreateMany successNotification (https://refine.dev/docs/data/hooks/use-create-many#successnotification) - useCreateMany errorNotification (https://refine.dev/docs/data/hooks/use-create-many#errornotification) - useCreate successNotification (https://refine.dev/docs/data/hooks/use-create#successnotification) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

helpful-purpleOP•10mo ago

@kapa.ai 'successNotification' does not exist in type 'MutateOptions<CreateResponse<BaseRecord>

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- It seems like there's a misunderstanding. The successNotification and errorNotification are not directly part of the MutateOptions. They are part of the options object that you pass to the mutate function of useCreate or useCreateMany. Here's how you should use it:

const { mutate: createMenuItem } = useCreate("menuitems");

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

const { mutate: createMenuItem } = useCreate("menuitems");

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

And for useCreateMany:

const { mutate: createManyAllergens } = useCreateMany("menuitemallergens");

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

const { mutate: createManyAllergens } = useCreateMany("menuitemallergens");

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

Please note that NotificationProvider (https://refine.dev/docs/notification/notification-provider/) is required for these props to work. Sources: - useCreateMany successNotification (https://refine.dev/docs/data/hooks/use-create-many#successnotification) - useCreate successNotification (https://refine.dev/docs/data/hooks/use-create#successnotification) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

helpful-purpleOP•10mo ago

@kapa.ai The only two properties that useCreate have are mutationOptions and overtimeOptions

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you're correct. The useCreate hook in Refine has two properties: mutationOptions and overtimeOptions. The mutationOptions property is used to pass options to the useMutation hook. It's useful when you want to pass additional options to the useMutation hook. However, it does not support onSuccess and onError props because they override the default onSuccess and onError functions. If you want to use these props, you can pass them to mutate functions. Here's an example:

const { mutate } = useCreate();  
  
mutate(  
 {  
 resource: "products",  
 values: {  
 name: "New Product",  
 material: "Wood",  
 },  
 },  
 {  
 onError: (error, variables, context) => {  
 // An error occurred!  
 },  
 onSuccess: (data, variables, context) => {  
 // Let's celebrate!  
 },  
 },  
);

const { mutate } = useCreate();  
  
mutate(  
 {  
 resource: "products",  
 values: {  
 name: "New Product",  
 material: "Wood",  
 },  
 },  
 {  
 onError: (error, variables, context) => {  
 // An error occurred!  
 },  
 onSuccess: (data, variables, context) => {  
 // Let's celebrate!  
 },  
 },  
);

Source (https://refine.dev/docs/data/hooks/use-create#mutationoptions) The overtimeOptions property is used when you want loading overtime for the request. It's useful when you want to show a loading indicator when the request takes too long. interval is the time interval in milliseconds. onInterval is the function that will be called on each interval. Here's an example:

const { overtime } = useCreate({  
 overtimeOptions: {  
 interval: 1000,  
 onInterval(elapsedInterval) {  
 console.log(elapsedInterval);  
 },  
 },  
});

const { overtime } = useCreate({  
 overtimeOptions: {  
 interval: 1000,  
 onInterval(elapsedInterval) {  
 console.log(elapsedInterval);  
 },  
 },  
});

Source (https://refine.dev/docs/data/hooks/use-create#overtimeoptions) Please note that the useCreate hook is used to create data in create or clone mode. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

helpful-purpleOP•10mo ago

@kapa.ai can you explain why useCreateMany would lead to TypeError: Cannot read properties of null (reading 'filter')?

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error TypeError: Cannot read properties of null (reading 'filter') typically occurs when you're trying to call a method on a variable that is null or undefined. In the context of useCreateMany, this could happen if the data you're trying to process is null or undefined. Here are a few possible reasons why this might be happening: 1. The values you're passing to useCreateMany might be null or undefined. Make sure that the data you're passing is an array and is not null or undefined.

const {{ mutate: createManyAllergens }} = useCreateMany();

createManyAllergens(
  {{
    resource: "menuitemallergens",
    values: allergenAssociations, // Make sure allergenAssociations is not null or undefined
  }},
  // ...
);

const {{ mutate: createManyAllergens }} = useCreateMany();

createManyAllergens(
  {{
    resource: "menuitemallergens",
    values: allergenAssociations, // Make sure allergenAssociations is not null or undefined
  }},
  // ...
);

2. The resource you're passing to useCreateMany might not exist or might not be correctly configured in your API. 3. There might be an issue with the data returned by your API. The useCreateMany hook expects the API to return an array of created records. If your API is returning null or undefined, this error might occur. Without more specific information about your code and data, it's hard to provide a more precise answer. If you're still facing this issue, I would recommend checking your data and your API to make sure everything is correctly set up. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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