dependent-tan•2y ago

Can I extract meta values to put in the notififications lookup

"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}}" },

44 Replies

kapa.ai•2y ago

Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To extract meta values and use them in the notifications lookup, you can follow these steps: 1. Pass meta values in your component: When using components like <DeleteButton>, you can pass meta values as shown below:

    <DeleteButton 
        confirmTitle='Delete Tooltip?' 
        hideText 
        recordItemId={id} 
        meta={{ category, subcategory }} 
    />

    <DeleteButton 
        confirmTitle='Delete Tooltip?' 
        hideText 
        recordItemId={id} 
        meta={{ category, subcategory }} 
    />

2. Access meta values in the data provider: The meta property is passed to your data provider's deleteOne method. You can access it from there. If you are using a data provider package, you can swizzle it and modify it as needed. Here is an example of how you can access meta values in a DELETE endpoint in Next.js:

    export async function DELETE(_: NextRequest, { params }: { params: { id: string } }) {
      console.log('deleting at id:', params.id);
      // Access meta values here
      // Example: const { category, subcategory } = meta;
      return NextResponse.json({ message: 'delete request hit' }, { status: 200 });
    }

    export async function DELETE(_: NextRequest, { params }: { params: { id: string } }) {
      console.log('deleting at id:', params.id);
      // Access meta values here
      // Example: const { category, subcategory } = meta;
      return NextResponse.json({ message: 'delete request hit' }, { status: 200 });
    }

3. Customize notifications using i18n provider: You can customize notification messages by overriding the keys in your i18n provider. Here is an example of how you can define these keys in your translation files:

    {
      "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}}"
      }
    }

4. Example of customizing error messages: If you want to translate error messages or customize them further, you can do so in your translation files. For example:

    {
      "notifications": {
        "editError": "{{resource}} is failed while editing"
      }
    }

    {
      "notifications": {
        "editError": "{{resource}} is failed while editing"
      }
    }

For more detailed information, you can refer to the following sources: - Notification Providers (https://refine.dev/docs/guides-concepts/notifications#notification-providers) - Accessing meta values in data provider (https://discord.com/channels/837692625737613362/1196870219675746314) - Customizing notifications with i18n provider (https://discord.com/channels/837692625737613362/1187552521040953344) By following these steps, you can effectively extract meta values and use them in your notifications lookup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

dependent-tanOP•2y ago

@kapa.ai can i get it to pick up the resource label instead? eg

                {
                  name: "firstBuyer/addBankAccount",
                  meta: {
                    label: "Bank Account",
                  },
                },

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can get it to pick up the resource label instead of the resource name by using the meta property in your resource configuration. The meta property allows you to define additional information about the resource, including a custom label. Here is how you can configure your resource with a custom label:

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

To use this custom label in your notifications, you can access the meta property in your data provider or wherever you handle notifications. Here is an example of how you might configure your notifications to use the custom label:

{
  "notifications": {
    "success": "Successful",
    "error": "Error (status code: {{statusCode}})",
    "undoable": "You have {{seconds}} seconds to undo",
    "createSuccess": "Successfully created {{meta.label}}",
    "createError": "There was an error creating {{meta.label}} (status code: {{statusCode}})",
    "deleteSuccess": "Successfully deleted {{meta.label}}",
    "deleteError": "Error when deleting {{meta.label}} (status code: {{statusCode}})",
    "editSuccess": "Successfully edited {{meta.label}}",
    "editError": "Error when editing {{meta.label}} (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 {{meta.label}}",
    "createError": "There was an error creating {{meta.label}} (status code: {{statusCode}})",
    "deleteSuccess": "Successfully deleted {{meta.label}}",
    "deleteError": "Error when deleting {{meta.label}} (status code: {{statusCode}})",
    "editSuccess": "Successfully edited {{meta.label}}",
    "editError": "Error when editing {{meta.label}} (status code: {{statusCode}})",
    "importProgress": "Importing: {{processed}}/{{total}}"
  }
}

In this configuration, {{meta.label}} will be replaced with the custom label defined in the meta property of your resource. For more information on how to use the meta property, you can refer to the Refine Component Documentation (https://refine.dev/docs/core/refine-component#meta) and the ResourceMeta Interface (https://refine.dev/docs/core/interface-references#resourcemeta). By following these steps, you can ensure that your notifications use the custom resource label defined in the meta property. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

dependent-tanOP•2y ago

@kapa.ai but other places resources are used they are picked up from the label automatically

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you want to ensure that the resource label is picked up automatically in other places where resources are used, you can leverage the useBreadcrumb hook and the i18n support provided by Refine. This way, the label property defined in the meta of your resource will be used automatically. Here is how you can define your resource with a custom label:

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

To ensure that the label is used automatically in other places, you can use the useBreadcrumb hook. According to the documentation, if the resource definition has a label property, useBreadcrumb will use the label property. Otherwise, it will use the name property of the resource. Here is an example of how you can use the useBreadcrumb hook:

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

const MyComponent = () => {
  const { breadcrumbs } = useBreadcrumb();

  return (
    <div>
      {breadcrumbs.map((breadcrumb) => (
        <span key={breadcrumb.label}>{breadcrumb.label}</span>
      ))}
    </div>
  );
};

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

const MyComponent = () => {
  const { breadcrumbs } = useBreadcrumb();

  return (
    <div>
      {breadcrumbs.map((breadcrumb) => (
        <span key={breadcrumb.label}>{breadcrumb.label}</span>
      ))}
    </div>
  );
};

For notifications, you can customize them to use the label property from the meta as shown below:

{
  "notifications": {
    "success": "Successful",
    "error": "Error (status code: {{statusCode}})",
    "undoable": "You have {{seconds}} seconds to undo",
    "createSuccess": "Successfully created {{meta.label}}",
    "createError": "There was an error creating {{meta.label}} (status code: {{statusCode}})",
    "deleteSuccess": "Successfully deleted {{meta.label}}",
    "deleteError": "Error when deleting {{meta.label}} (status code: {{statusCode}})",
    "editSuccess": "Successfully edited {{meta.label}}",
    "editError": "Error when editing {{meta.label}} (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 {{meta.label}}",
    "createError": "There was an error creating {{meta.label}} (status code: {{statusCode}})",
    "deleteSuccess": "Successfully deleted {{meta.label}}",
    "deleteError": "Error when deleting {{meta.label}} (status code: {{statusCode}})",
    "editSuccess": "Successfully edited {{meta.label}}",
    "editError": "Error when editing {{meta.label}} (status code: {{statusCode}})",
    "importProgress": "Importing: {{processed}}/{{total}}"
  }
}

By following these steps, you can ensure that the label property defined in the meta of your resource is used automatically in other places where resources are referenced. For more detailed information, you can refer to the following sources: - useBreadcrumb Documentation (https://refine.dev/docs/core/hooks/utilities/use-breadcrumb#i18n-support) - Refine Component Documentation (https://refine.dev/docs/core/refine-component#meta) This approach ensures consistency across your application by using the label property wherever the resource is referenced. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

dependent-tanOP•2y ago

@kapa.ai I am using but it does not seem to have access to the meta of the label With i18n Check the guide Please check the guide for more information on this topic. Refine's notification integration is also integrated with the i18n Provider. This means that you can use the i18n integration to customize the notifications. Refine uses following keys for the notifications and popultes {{resource}} and {{statusCode}}. You can override these keys in your i18n provider to customize the notifications. /locales/en/common.json { "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•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To ensure that your notifications use the custom resource label defined in the meta property, you can follow these steps. Refine's notification integration is also integrated with the i18n provider, which allows you to customize the notifications. Step 1: Define Your Resource with a Custom Label First, define your resource with a custom label in the meta property:

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

Step 2: Customize Notifications Using i18n Provider You can customize the notification messages by overriding the keys in your i18n provider. Here is an example of how you can define these keys in your translation files:

{
  "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}}"
  }
}

Step 3: Access meta Values in Data Provider To use the meta values in your notifications, you need to access them in your data provider. Here is an example of how you can access meta values in a DELETE endpoint in Next.js:

export async function DELETE(_: NextRequest, { params }: { params: { id: string } }) {
  console.log('deleting at id:', params.id);
  // Access meta values here
  // Example: const { category, subcategory } = meta;
  return NextResponse.json({ message: 'delete request hit' }, { status: 200 });
}

export async function DELETE(_: NextRequest, { params }: { params: { id: string } }) {
  console.log('deleting at id:', params.id);
  // Access meta values here
  // Example: const { category, subcategory } = meta;
  return NextResponse.json({ message: 'delete request hit' }, { status: 200 });
}

Step 4: Ensure Consistency Across Your Application By following these steps, you can ensure that the label property defined in the meta of your resource is used automatically in other places where resources are referenced. For more detailed information, you can refer to the following sources: - Notification Providers (https://refine.dev/docs/guides-concepts/notifications#notification-providers) - Refine Component Documentation (https://refine.dev/docs/core/refine-component#meta) - Internationalization (i18n) Guide (https://refine.dev/docs/guides-concepts/i18n#adding-the-translations-files) This approach ensures that your notifications and other references to resources use the custom labels defined in the meta property. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

dependent-tanOP•2y ago

@kapa.ai it says I can customize the provider is there something i can do here to access the label

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books:

dependent-tanOP•2y ago

@kapa.ai const i18nProvider = { translate: (key: string, params: object) => t(key, params), changeLocale: (lang: string) => i18n.changeLanguage(lang), getLocale: () => i18n.language, };

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can customize the data provider to access the meta property, including the custom label, and use it in your notifications. Here’s how you can do it: Step 1: Define Your Resource with a Custom Label First, define your resource with a custom label in the meta property:

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

Step 2: Customize the Data Provider You can customize the data provider to access the meta property. Here’s an example of how you can modify the getOne method to access the meta property:

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

export const dataProvider = (apiUrl: string): DataProvider => ({
  // Other methods...
  getOne: async ({ resource, id, meta }) => {
    const { label } = meta;
    const url = `${apiUrl}/${resource}/${id}`;

    // Example: Use the label in a notification
    console.log(`Fetching ${label} with ID: ${id}`);

    const { data } = await httpClient.get(url);

    return {
      data,
    };
  },
  // Other methods...
});

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

export const dataProvider = (apiUrl: string): DataProvider => ({
  // Other methods...
  getOne: async ({ resource, id, meta }) => {
    const { label } = meta;
    const url = `${apiUrl}/${resource}/${id}`;

    // Example: Use the label in a notification
    console.log(`Fetching ${label} with ID: ${id}`);

    const { data } = await httpClient.get(url);

    return {
      data,
    };
  },
  // Other methods...
});

Step 3: Customize Notifications Using i18n Provider You can customize the notification messages by overriding the keys in your i18n provider. Here is an example of how you can define these keys in your translation files:

{
  "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}}"
  }
}

Step 4: Use the Custom Label in Notifications When performing actions like creating, deleting, or editing resources, you can use the custom label from the meta property in your notifications. Here’s an example of how you might handle a delete action:

import { notification } from "antd";

const handleDelete = async (id) => {
  try {
    await dataProvider.deleteOne({
      resource: "firstBuyer/addBankAccount",
      id,
      meta: {
        label: "Bank Account",
      },
    });
    notification.success({
      message: `Successfully deleted ${meta.label}`,
    });
  } catch (error) {
    notification.error({
      message: `Error when deleting ${meta.label} (status code: ${error.statusCode})`,
    });
  }
};

import { notification } from "antd";

const handleDelete = async (id) => {
  try {
    await dataProvider.deleteOne({
      resource: "firstBuyer/addBankAccount",
      id,
      meta: {
        label: "Bank Account",
      },
    });
    notification.success({
      message: `Successfully deleted ${meta.label}`,
    });
  } catch (error) {
    notification.error({
      message: `Error when deleting ${meta.label} (status code: ${error.statusCode})`,
    });
  }
};

By following these steps, you can ensure that the label property defined in the meta of your resource is used in your notifications and other parts of your application. For more detailed information, you can refer to the following sources: - Notification Providers (https://refine.dev/docs/guides-concepts/notifications#notification-providers) - Refine Component Documentation (https://refine.dev/docs/core/refine-component#meta) - [Internationalization (i18n) Guide](https:// ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

kapa.ai•2y ago

---------------------- To ensure that your notifications use the custom resource label defined in the meta property, you can integrate the i18n provider with Refine. Here is how you can set up your i18nProvider and customize the notifications. Step 1: Define Your Resource with a Custom Label First, define your resource with a custom label in the meta property:

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

Step 2: Set Up the i18nProvider You can set up your i18nProvider to handle translations and locale changes. Here is an example configuration:

const i18nProvider = {
  translate: (key: string, params: object) => t(key, params),
  changeLocale: (lang: string) => i18n.changeLanguage(lang),
  getLocale: () => i18n.language,
};

const i18nProvider = {
  translate: (key: string, params: object) => t(key, params),
  changeLocale: (lang: string) => i18n.changeLanguage(lang),
  getLocale: () => i18n.language,
};

{
  "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}}"
  }
}

Step 4: Access meta Values in Data Provider To use the meta values in your notifications, you need to access them in your data provider. Here is an example of how you can access meta values in a DELETE endpoint in Next.js:

export async function DELETE(_: NextRequest, { params }: { params: { id: string } }) {
  console.log('deleting at id:', params.id);
  // Access meta values here
  // Example: const { category, subcategory } = meta;
  return NextResponse.json({ message: 'delete request hit' }, { status: 200 });
}

export async function DELETE(_: NextRequest, { params }: { params: { id: string } }) {
  console.log('deleting at id:', params.id);
  // Access meta values here
  // Example: const { category, subcategory } = meta;
  return NextResponse.json({ message: 'delete request hit' }, { status: 200 });
}

Step 5: Ensure Consistency Across Your Application By following these steps, you can ensure that the label property defined in the meta of your resource is used automatically in other places where resources are referenced. For more detailed information, you can refer to the following sources: - Notification Providers (https://refine.dev/docs/guides-concepts/notifications#notification-providers) - Refine Component Documentation (https://refine.dev/docs/core/refine-component#meta) - Internationalization (i18n) Guide (https://refine.dev/docs/guides-concepts/i18n#adding-the-translations-files) This approach ensures that your notifications and other references to resources use the custom labels defined in the meta property. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

dependent-tanOP•2y ago

@kapa.ai I am using the simple-rest-data provider

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To ensure that your notifications use the custom resource label defined in the meta property while using the simple-rest-data provider, you can customize the data provider to access the meta property. Here’s how you can do it: Step 1: Define Your Resource with a Custom Label First, define your resource with a custom label in the meta property:

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

Step 2: Customize the Data Provider You can customize the data provider to access the meta property. Here’s an example of how you can modify the deleteOne method to access the meta property and use it in your notifications:

import dataProvider from "@refinedev/simple-rest";
import { notification } from "antd";

const API_URL = "<https://api.fake-rest.refine.dev";>

const simpleRestProvider = dataProvider(API_URL);

const myDataProvider = {
  ...simpleRestProvider,
  deleteOne: async ({ resource, id, meta }) => {
    const { label } = meta;
    const url = `${API_URL}/${resource}/${id}`;

    try {
      const { data } = await simpleRestProvider.deleteOne({ resource, id, meta });
      notification.success({
        message: `Successfully deleted ${label}`,
      });
      return { data };
    } catch (error) {
      notification.error({
        message: `Error when deleting ${label} (status code: ${error.statusCode})`,
      });
      throw error;
    }
  },
};

<Refine dataProvider={myDataProvider} />;

import dataProvider from "@refinedev/simple-rest";
import { notification } from "antd";

const API_URL = "<https://api.fake-rest.refine.dev";>

const simpleRestProvider = dataProvider(API_URL);

const myDataProvider = {
  ...simpleRestProvider,
  deleteOne: async ({ resource, id, meta }) => {
    const { label } = meta;
    const url = `${API_URL}/${resource}/${id}`;

    try {
      const { data } = await simpleRestProvider.deleteOne({ resource, id, meta });
      notification.success({
        message: `Successfully deleted ${label}`,
      });
      return { data };
    } catch (error) {
      notification.error({
        message: `Error when deleting ${label} (status code: ${error.statusCode})`,
      });
      throw error;
    }
  },
};

<Refine dataProvider={myDataProvider} />;

{
  "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}}"
  }
}

import { notification } from "antd";

const handleDelete = async (id) => {
  try {
    await myDataProvider.deleteOne({
      resource: "firstBuyer/addBankAccount",
      id,
      meta: {
        label: "Bank Account",
      },
    });
    notification.success({
      message: `Successfully deleted Bank Account`,
    });
  } catch (error) {
    notification.error({
      message: `Error when deleting Bank Account (status code: ${error.statusCode})`,
    });
  }
};

import { notification } from "antd";

const handleDelete = async (id) => {
  try {
    await myDataProvider.deleteOne({
      resource: "firstBuyer/addBankAccount",
      id,
      meta: {
        label: "Bank Account",
      },
    });
    notification.success({
      message: `Successfully deleted Bank Account`,
    });
  } catch (error) {
    notification.error({
      message: `Error when deleting Bank Account (status code: ${error.statusCode})`,
    });
  }
};

By following these steps, you can ensure that the label property defined in the meta of your ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

dependent-tanOP•2y ago

@kapa.ai what other feilds does the config have access too by default

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The configuration for the simple-rest-data provider and other data providers in Refine typically has access to several fields by default. These fields are used to manage various aspects of data operations such as fetching, creating, updating, and deleting resources. Here are some of the common fields and their purposes: Common Fields in Data Provider Configuration 1. resource: The name of the resource being accessed (e.g., "posts", "users"). 2. id: The unique identifier for a specific resource item. 3. data: The data payload for create or update operations. 4. meta: Additional metadata that can be passed to customize the behavior of the data provider. Example Configuration Here is an example of how these fields might be used in a data provider method:

import dataProvider from "@refinedev/simple-rest";
import { notification } from "antd";

const API_URL = "<https://api.fake-rest.refine.dev";>

const simpleRestProvider = dataProvider(API_URL);

const myDataProvider = {
  ...simpleRestProvider,
  deleteOne: async ({ resource, id, meta }) => {
    const { label } = meta;
    const url = `${API_URL}/${resource}/${id}`;

    try {
      const { data } = await simpleRestProvider.deleteOne({ resource, id, meta });
      notification.success({
        message: `Successfully deleted ${label}`,
      });
      return { data };
    } catch (error) {
      notification.error({
        message: `Error when deleting ${label} (status code: ${error.statusCode})`,
      });
      throw error;
    }
  },
};

<Refine dataProvider={myDataProvider} />;

import dataProvider from "@refinedev/simple-rest";
import { notification } from "antd";

const API_URL = "<https://api.fake-rest.refine.dev";>

const simpleRestProvider = dataProvider(API_URL);

const myDataProvider = {
  ...simpleRestProvider,
  deleteOne: async ({ resource, id, meta }) => {
    const { label } = meta;
    const url = `${API_URL}/${resource}/${id}`;

    try {
      const { data } = await simpleRestProvider.deleteOne({ resource, id, meta });
      notification.success({
        message: `Successfully deleted ${label}`,
      });
      return { data };
    } catch (error) {
      notification.error({
        message: `Error when deleting ${label} (status code: ${error.statusCode})`,
      });
      throw error;
    }
  },
};

<Refine dataProvider={myDataProvider} />;

Customizing Notifications Using i18n Provider You can customize the notification messages by overriding the keys in your i18n provider. Here is an example of how you can define these keys in your translation files:

{
  "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}}"
  }
}

Additional Resources For more detailed information, you can refer to the following sources: - Notification Providers (https://refine.dev/docs/guides-concepts/notifications#notification-providers) - Refine Component Documentation (https://refine.dev/docs/core/refine-component#meta) - Internationalization (i18n) Guide (https://refine.dev/docs/guides-concepts/i18n#adding-the-translations-files) By understanding and utilizing these fields, you can effectively manage and customize the behavior of your data provider in Refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

dependent-tanOP•2y ago

@kapa.ai how can i do this You can customize the notification messages by overriding the keys in your i18n provider.

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To customize the notification messages by overriding the keys in your i18n provider, you can follow these steps: Step 1: Set Up the i18nProvider First, set up your i18nProvider to handle translations and locale changes. Here is an example configuration:

import { Refine } from "@refinedev/core";  
import { useNotificationProvider, Layout } from "@refinedev/antd";  
import routerProvider from "@refinedev/react-router-v6";  
import dataProvider from "@refinedev/simple-rest";  
import { useTranslation } from "react-i18next";  

const i18nProvider = {
  translate: (key: string, params: object) => t(key, params),
  changeLocale: (lang: string) => i18n.changeLanguage(lang),
  getLocale: () => i18n.language,
};

function App() {
  const { t, i18n } = useTranslation();

  return (
    <Refine
      routerProvider={routerProvider}
      notificationProvider={useNotificationProvider}
      Layout={Layout}
      dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
      resources={[
        {
          name: "firstBuyer/addBankAccount",
          meta: {
            label: "Bank Account",
          },
        },
      ]}
      i18nProvider={i18nProvider}
    />
  );
}

export default App;

import { Refine } from "@refinedev/core";  
import { useNotificationProvider, Layout } from "@refinedev/antd";  
import routerProvider from "@refinedev/react-router-v6";  
import dataProvider from "@refinedev/simple-rest";  
import { useTranslation } from "react-i18next";  

const i18nProvider = {
  translate: (key: string, params: object) => t(key, params),
  changeLocale: (lang: string) => i18n.changeLanguage(lang),
  getLocale: () => i18n.language,
};

function App() {
  const { t, i18n } = useTranslation();

  return (
    <Refine
      routerProvider={routerProvider}
      notificationProvider={useNotificationProvider}
      Layout={Layout}
      dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
      resources={[
        {
          name: "firstBuyer/addBankAccount",
          meta: {
            label: "Bank Account",
          },
        },
      ]}
      i18nProvider={i18nProvider}
    />
  );
}

export default App;

Step 2: Create Translation Files Create your translation files to override the default notification messages. For example, create a common.json file in the /public/locales/en/ directory:

{
  "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}}"
  }
}

Step 3: Use the Custom Labels in Notifications When performing actions like creating, deleting, or editing resources, you can use the custom label from the meta property in your notifications. Here’s an example of how you might handle a delete action:

import { notification } from "antd";

const handleDelete = async (id) => {
  try {
    await dataProvider.deleteOne({
      resource: "firstBuyer/addBankAccount",
      id,
      meta: {
        label: "Bank Account",
      },
    });
    notification.success({
      message: `Successfully deleted Bank Account`,
    });
  } catch (error) {
    notification.error({
      message: `Error when deleting Bank Account (status code: ${error.statusCode})`,
    });
  }
};

import { notification } from "antd";

const handleDelete = async (id) => {
  try {
    await dataProvider.deleteOne({
      resource: "firstBuyer/addBankAccount",
      id,
      meta: {
        label: "Bank Account",
      },
    });
    notification.success({
      message: `Successfully deleted Bank Account`,
    });
  } catch (error) {
    notification.error({
      message: `Error when deleting Bank Account (status code: ${error.statusCode})`,
    });
  }
};

Additional Resources For more detailed information, you can refer to the following sources: - Notification Providers (https://refine.dev/docs/guides-concepts/notifications#notification-providers) - Refine Component Documentation (https://refine.dev/docs/core/refine-component#meta) - Internationalization (i18n) Guide (https://refine.dev/docs/guides-concepts/i18n#adding-the-translations-files) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

dependent-tanOP•2y ago

@kapa.ai in the notifications context I cant see how it is passing any additonal data or a place to fit in passing the meta

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books:

dependent-tanOP•2y ago

export type SuccessErrorNotification< TData = unknown, TError = unknown, TVariables = unknown,

= {

/ * Success notification configuration to be displayed when the mutation is successful. * @default '"There was an error creating resource (status code: statusCode)" or "Error when updating resource (status code: statusCode)"' */ successNotification?: | OpenNotificationParams | false | (( data?: TData, values?: TVariables, resource?: string, ) => OpenNotificationParams | false); / * Error notification configuration to be displayed when the mutation fails. * @default '"There was an error creating resource (status code: statusCode)" or "Error when updating resource (status code: statusCode)"' */ errorNotification?: | OpenNotificationParams | false | (( error?: TError, values?: TVariables, resource?: string, ) => OpenNotificationParams | false); }; export type OpenNotificationParams = { key?: string; message: string; type: "success" | "error" | "progress"; description?: string; cancelMutation?: () => void; undoableTimeout?: number; }; export interface INotificationContext { open?: (params: OpenNotificationParams) => void; close?: (key: string) => void; } export type NotificationProvider = Required<INotificationContext>;

kapa.ai•2y ago

---------------------- To customize notifications and pass additional data such as meta in the context of notifications, you can leverage the i18n provider and the meta property in your data provider methods. Here’s how you can achieve this: Step 1: Define Your Resource with a Custom Label First, define your resource with a custom label in the meta property:

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

Step 2: Set Up the i18nProvider Set up your i18nProvider to handle translations and locale changes. Here is an example configuration:

import { Refine } from "@refinedev/core";  
import { notificationProvider, Layout } from "@refinedev/antd";  
import routerProvider from "@refinedev/react-router-v6";  
import dataProvider from "@refinedev/simple-rest";  
import { useTranslation } from "react-i18next";  

const i18nProvider = {
  translate: (key, params) => t(key, params),
  changeLocale: (lang) => i18n.changeLanguage(lang),
  getLocale: () => i18n.language,
};

function App() {
  const { t, i18n } = useTranslation();

  return (
    <Refine
      routerProvider={routerProvider}
      notificationProvider={notificationProvider}
      Layout={Layout}
      dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
      resources={[
        {
          name: "firstBuyer/addBankAccount",
          meta: {
            label: "Bank Account",
          },
        },
      ]}
      i18nProvider={i18nProvider}
    />
  );
}

export default App;

import { Refine } from "@refinedev/core";  
import { notificationProvider, Layout } from "@refinedev/antd";  
import routerProvider from "@refinedev/react-router-v6";  
import dataProvider from "@refinedev/simple-rest";  
import { useTranslation } from "react-i18next";  

const i18nProvider = {
  translate: (key, params) => t(key, params),
  changeLocale: (lang) => i18n.changeLanguage(lang),
  getLocale: () => i18n.language,
};

function App() {
  const { t, i18n } = useTranslation();

  return (
    <Refine
      routerProvider={routerProvider}
      notificationProvider={notificationProvider}
      Layout={Layout}
      dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
      resources={[
        {
          name: "firstBuyer/addBankAccount",
          meta: {
            label: "Bank Account",
          },
        },
      ]}
      i18nProvider={i18nProvider}
    />
  );
}

export default App;

Step 3: Create Translation Files Create your translation files to override the default notification messages. For example, create a common.json file in the /public/locales/en/ directory:

{
  "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}}"
  }
}

Step 4: Customize the Data Provider Customize the data provider to access the meta property and use it in your notifications. Here’s an example of how you can modify the deleteOne method to access the meta property:

``javascript
import dataProvider from "@refinedev/simple-rest";
import { notification } from "antd";

const API_URL = "<https://api.fake-rest.refine.dev";>

const simpleRestProvider = dataProvider(API_URL);

const myDataProvider = {
  ...simpleRestProvider,
  deleteOne: async ({ resource, id, meta }) => {
    const { label } = meta;
    const url =

${API_URL}/${resource}/${id}`; try { const { data } = await simpleRestProvider.deleteOne({ resource, id, meta }); notification.success({ ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

dependent-tanOP•2y ago

@kapa.ai I am looking at the types here for it export type SuccessErrorNotification< TData = unknown, TError = unknown, TVariables = unknown,

= {

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To customize notifications in Refine, you can use the SuccessErrorNotification type and the OpenNotificationParams type. These types allow you to configure success and error notifications for mutations, and you can pass additional data such as meta to customize the messages. Types Overview Here are the relevant types for configuring notifications:

export type SuccessErrorNotification<
  TData = unknown,
  TError = unknown,
  TVariables = unknown,
> = {
  /**
   * Success notification configuration to be displayed when the mutation is successful.
   * @default '"There was an error creating resource (status code: `statusCode`)" or "Error when updating resource (status code: statusCode)"'
   */
  successNotification?:
    | OpenNotificationParams
    | false
    | ((
        data?: TData,
        values?: TVariables,
        resource?: string,
      ) => OpenNotificationParams | false);
  /**
   * Error notification configuration to be displayed when the mutation fails.
   * @default '"There was an error creating resource (status code: `statusCode`)" or "Error when updating resource (status code: statusCode)"'
   */
  errorNotification?:
    | OpenNotificationParams
    | false
    | ((
        error?: TError,
        values?: TVariables,
        resource?: string,
      ) => OpenNotificationParams | false);
};

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

export interface INotificationContext {
  open?: (params: OpenNotificationParams) => void;
  close?: (key: string) => void;
}

export type NotificationProvider = Required<INotificationContext>;

export type SuccessErrorNotification<
  TData = unknown,
  TError = unknown,
  TVariables = unknown,
> = {
  /**
   * Success notification configuration to be displayed when the mutation is successful.
   * @default '"There was an error creating resource (status code: `statusCode`)" or "Error when updating resource (status code: statusCode)"'
   */
  successNotification?:
    | OpenNotificationParams
    | false
    | ((
        data?: TData,
        values?: TVariables,
        resource?: string,
      ) => OpenNotificationParams | false);
  /**
   * Error notification configuration to be displayed when the mutation fails.
   * @default '"There was an error creating resource (status code: `statusCode`)" or "Error when updating resource (status code: statusCode)"'
   */
  errorNotification?:
    | OpenNotificationParams
    | false
    | ((
        error?: TError,
        values?: TVariables,
        resource?: string,
      ) => OpenNotificationParams | false);
};

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

export interface INotificationContext {
  open?: (params: OpenNotificationParams) => void;
  close?: (key: string) => void;
}

export type NotificationProvider = Required<INotificationContext>;

Customizing Notifications To customize notifications, you can define the successNotification and errorNotification properties in your mutation hooks. These properties can be functions that return OpenNotificationParams, allowing you to include additional data such as meta. Here is an example of how you can customize notifications for a delete operation:

import { useMutation } from "@refinedev/core";
import { notification } from "antd";

const useDeleteWithNotification = () => {
  const { mutate } = useMutation({
    mutationFn: async ({ id, meta }) => {
      // Perform the delete operation
      await myDataProvider.deleteOne({
        resource: "firstBuyer/addBankAccount",
        id,
        meta,
      });
    },
    successNotification: (data, variables, resource) => ({
      message: `Successfully deleted ${variables.meta.label}`,
      type: "success",
    }),
    errorNotification: (error, variables, resource) => ({
      message: `Error when deleting ${variables.meta.label} (status code: ${error.statusCode})`,
      type: "error",
    }),
  });

  return { mutate };
};

import { useMutation } from "@refinedev/core";
import { notification } from "antd";

const useDeleteWithNotification = () => {
  const { mutate } = useMutation({
    mutationFn: async ({ id, meta }) => {
      // Perform the delete operation
      await myDataProvider.deleteOne({
        resource: "firstBuyer/addBankAccount",
        id,
        meta,
      });
    },
    successNotification: (data, variables, resource) => ({
      message: `Successfully deleted ${variables.meta.label}`,
      type: "success",
    }),
    errorNotification: (error, variables, resource) => ({
      message: `Error when deleting ${variables.meta.label} (status code: ${error.statusCode})`,
      type: "error",
    }),
  });

  return { mutate };
};

Using the Custom Hook You can then use this custom hook in your component to handle delete operations with customized notifications:

const MyComponent = () => {
  const { mutate: deleteWithNotification } = useDeleteWithNotification();

  const handleDelete = (id) => {
    deleteWithNotification({
      id,
      meta: {
        label: "Bank Account",
      },
    });
  };

  return (
    <button onClick={() => handleDelete(1)}>Delete</button>
  );
};

const MyComponent = () => {
  const { mutate: deleteWithNotification } = useDeleteWithNotification();

  const handleDelete = (id) => {
    deleteWithNotification({
      id,
      meta: {
        label: "Bank Account",
      },
    });
  };

  return (
    <button onClick={() => handleDelete(1)}>Delete</button>
  );
};

Additional Resources For more detailed information, you can refer to the following sources: - [Notification Providers](https://refine.dev/docs/g ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

dependent-tanOP•2y ago

@kapa.ai I am trying to not have to overide for each create for example

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To avoid having to override notifications for each create, update, or delete operation individually, you can create a higher-order function or a custom data provider that handles the notification logic centrally. This way, you can ensure that the meta property is used consistently across all operations. Step 1: Define Your Resource with a Custom Label First, define your resource with a custom label in the meta property:

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

<Refine
  resources={[
    {
      name: "firstBuyer/addBankAccount",
      meta: {
        label: "Bank Account",
      },
    },
  ]}
/>

Step 2: Customize the Data Provider Create a custom data provider that wraps the existing simple-rest-data provider and adds notification logic. This custom provider will handle success and error notifications for all operations.

import dataProvider from "@refinedev/simple-rest";
import { notification } from "antd";

const API_URL = "<https://api.fake-rest.refine.dev";>

const simpleRestProvider = dataProvider(API_URL);
const myDataProvider = {
  ...simpleRestProvider,
  create: async ({ resource, variables, meta }) => {
    try {
      const { data } = await simpleRestProvider.create({ resource, variables, meta });
      notification.success({
        message: `Successfully created ${meta.label}`,
      });
      return { data };
    } catch (error) {
      notification.error({
        message: `Error when creating ${meta.label} (status code: ${error.statusCode})`,
      });
      throw error;
    }
  },
  update: async ({ resource, id, variables, meta }) => {
    try {
      const { data } = await simpleRestProvider.update({ resource, id, variables, meta });
      notification.success({
        message: `Successfully updated ${meta.label}`,
      });
      return { data };
    } catch (error) {
      notification.error({
        message: `Error when updating ${meta.label} (status code: ${error.statusCode})`,
      });
      throw error;
    }
  },
  deleteOne: async ({ resource, id, meta }) => {
    try {
      const { data } = await simpleRestProvider.deleteOne({ resource, id, meta });
      notification.success({
        message: `Successfully deleted ${meta.label}`,
      });
      return { data };
    } catch (error) {
      notification.error({
        message: `Error when deleting ${meta.label} (status code: ${error.statusCode})`,
      });
      throw error;
    }
  },
};

<Refine dataProvider={myDataProvider} />;

import dataProvider from "@refinedev/simple-rest";
import { notification } from "antd";

const API_URL = "<https://api.fake-rest.refine.dev";>

const simpleRestProvider = dataProvider(API_URL);
const myDataProvider = {
  ...simpleRestProvider,
  create: async ({ resource, variables, meta }) => {
    try {
      const { data } = await simpleRestProvider.create({ resource, variables, meta });
      notification.success({
        message: `Successfully created ${meta.label}`,
      });
      return { data };
    } catch (error) {
      notification.error({
        message: `Error when creating ${meta.label} (status code: ${error.statusCode})`,
      });
      throw error;
    }
  },
  update: async ({ resource, id, variables, meta }) => {
    try {
      const { data } = await simpleRestProvider.update({ resource, id, variables, meta });
      notification.success({
        message: `Successfully updated ${meta.label}`,
      });
      return { data };
    } catch (error) {
      notification.error({
        message: `Error when updating ${meta.label} (status code: ${error.statusCode})`,
      });
      throw error;
    }
  },
  deleteOne: async ({ resource, id, meta }) => {
    try {
      const { data } = await simpleRestProvider.deleteOne({ resource, id, meta });
      notification.success({
        message: `Successfully deleted ${meta.label}`,
      });
      return { data };
    } catch (error) {
      notification.error({
        message: `Error when deleting ${meta.label} (status code: ${error.statusCode})`,
      });
      throw error;
    }
  },
};

<Refine dataProvider={myDataProvider} />;

Step 3: Use the Custom Data Provider Now, you can use the custom data provider in your Refine application. The custom provider will handle notifications for all create, update, and delete operations, using the meta property to customize the messages. Additional Resources For more detailed information, you can refer to the following sources: - Notification Providers (https://refine.dev/docs/guides-concepts/notifications#notification-providers) - Refine Component Documentation (https://refine.dev/docs/core/refine-component#meta) - Internationalization (i18n) Guide (https://refine.dev/docs/guides-concepts/i18n#adding-the-translations-files) By following these steps, you can ensure that your notifications are consistent and use the custom labels defined in the meta property without having to override them for each individual operation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

dependent-tanOP•2y ago

@kapa.ai I dont think thats right as the dataProvider should not call the notificaitons

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You're correct. The data provider itself should not handle notifications directly. Instead, you can centralize the notification logic by customizing the hooks provided by Refine, such as useCreate, useUpdate, and useDelete, to include the notification logic. This way, you avoid duplicating the notification logic across different parts of your application. Step 1: Define Your Resource with a Custom Label First, define your resource with a custom label in the meta property:

<Refine
  resources={{[
    {{
      name: "firstBuyer/addBankAccount",
      meta: {{
        label: "Bank Account",
      }},
    }},
  ]}}
/>

<Refine
  resources={{[
    {{
      name: "firstBuyer/addBankAccount",
      meta: {{
        label: "Bank Account",
      }},
    }},
  ]}}
/>

Step 2: Create a Custom Hook for Notifications Create a custom hook that wraps the existing hooks and adds notification logic. This custom hook will handle success and error notifications for all operations, using the meta property to customize the messages.

import { useCreate, useUpdate, useDelete } from "@refinedev/core";
import { notification } from "antd";

const useCustomCreate = () => {
  const { mutate: create } = useCreate();

  const customCreate = (params) => {
    create({
      ...params,
      successNotification: (data, variables, resource) => ({
        message: `Successfully created ${variables.meta.label}`,
        type: "success",
      }),
      errorNotification: (error, variables, resource) => ({
        message: `Error when creating ${variables.meta.label} (status code: ${error.statusCode})`,
        type: "error",
      }),
    });
  };

  return { mutate: customCreate };
};

const useCustomUpdate = () => {
  const { mutate: update } = useUpdate();
const customUpdate = (params) => {
    update({
      ...params,
      successNotification: (data, variables, resource) => ({
        message: `Successfully updated ${variables.meta.label}`,
        type: "success",
      }),
      errorNotification: (error, variables, resource) => ({
        message: `Error when updating ${variables.meta.label} (status code: ${error.statusCode})`,
        type: "error",
      }),
    });
  };

  return { mutate: customUpdate };
};

const useCustomDelete = () => {
  const { mutate: deleteOne } = useDelete();

  const customDelete = (params) => {
    deleteOne({
      ...params,
      successNotification: (data, variables, resource) => ({
        message: `Successfully deleted ${variables.meta.label}`,
        type: "success",
      }),
      errorNotification: (error, variables, resource) => ({
        message: `Error when deleting ${variables.meta.label} (status code: ${error.statusCode})`,
        type: "error",
      }),
    });
  };

  return { mutate: customDelete };
};

import { useCreate, useUpdate, useDelete } from "@refinedev/core";
import { notification } from "antd";

const useCustomCreate = () => {
  const { mutate: create } = useCreate();

  const customCreate = (params) => {
    create({
      ...params,
      successNotification: (data, variables, resource) => ({
        message: `Successfully created ${variables.meta.label}`,
        type: "success",
      }),
      errorNotification: (error, variables, resource) => ({
        message: `Error when creating ${variables.meta.label} (status code: ${error.statusCode})`,
        type: "error",
      }),
    });
  };

  return { mutate: customCreate };
};

const useCustomUpdate = () => {
  const { mutate: update } = useUpdate();
const customUpdate = (params) => {
    update({
      ...params,
      successNotification: (data, variables, resource) => ({
        message: `Successfully updated ${variables.meta.label}`,
        type: "success",
      }),
      errorNotification: (error, variables, resource) => ({
        message: `Error when updating ${variables.meta.label} (status code: ${error.statusCode})`,
        type: "error",
      }),
    });
  };

  return { mutate: customUpdate };
};

const useCustomDelete = () => {
  const { mutate: deleteOne } = useDelete();

  const customDelete = (params) => {
    deleteOne({
      ...params,
      successNotification: (data, variables, resource) => ({
        message: `Successfully deleted ${variables.meta.label}`,
        type: "success",
      }),
      errorNotification: (error, variables, resource) => ({
        message: `Error when deleting ${variables.meta.label} (status code: ${error.statusCode})`,
        type: "error",
      }),
    });
  };

  return { mutate: customDelete };
};

Step 3: Use the Custom Hooks in Your Components Now, you can use these custom hooks in your components to handle create, update, and delete operations with centralized notification logic. ```jsx const MyComponent = () => { const { mutate: createWithNotification } = useCustomCreate(); const { mutate: updateWithNotification } = useCustomUpdate(); const { mutate: deleteWithNotification } = useCustomDelete(); const handleCreate = (variables) => { createWithNotification({ resource: "firstBuyer/addBankAccount", variables, meta: { label: "Bank Account", }, }); }; const handleUpdate = (id, variables) => { updateWithNotification({ resource: "firstBuyer/addBankAccount", id, variables, meta ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

dependent-tanOP•2y ago

@kapa.ai I see i can also define this reource mapping here "firstBuyer/addBankAccount": { "firstBuyer/addBankAccount": "Bank Account" },

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can define resource mappings in your i18n translation files to map resource names to more user-friendly labels. This approach allows you to centralize the resource labels and use them consistently across your application, including in notifications. Step 1: Define Resource Mappings in i18n Translation Files Create or update your translation files to include resource mappings. For example, in your common.json file in the /public/locales/en/ directory, you can define the mappings like this:

{
  "resources": {
    "firstBuyer/addBankAccount": "Bank Account"
  },
  "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}}"
  }
}

{
  "resources": {
    "firstBuyer/addBankAccount": "Bank Account"
  },
  "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}}"
  }
}

Step 2: Set Up the i18nProvider Set up your i18nProvider to handle translations and locale changes. Here is an example configuration:

import { Refine } from "@refinedev/core";  
import { notificationProvider, Layout } from "@refinedev/antd";  
import routerProvider from "@refinedev/react-router-v6";  
import dataProvider from "@refinedev/simple-rest";  
import { useTranslation } from "react-i18next";  

const i18nProvider = {
  translate: (key, params) => t(key, params),
  changeLocale: (lang) => i18n.changeLanguage(lang),
  getLocale: () => i18n.language,
};
function App() {
  const { t, i18n } = useTranslation();

  return (
    <Refine
      routerProvider={routerProvider}
      notificationProvider={notificationProvider}
      Layout={Layout}
      dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
      resources={[
        {
          name: "firstBuyer/addBankAccount",
          meta: {
            label: t("resources.firstBuyer/addBankAccount"),
          },
        },
      ]}
      i18nProvider={i18nProvider}
    />
  );
}

export default App;

import { Refine } from "@refinedev/core";  
import { notificationProvider, Layout } from "@refinedev/antd";  
import routerProvider from "@refinedev/react-router-v6";  
import dataProvider from "@refinedev/simple-rest";  
import { useTranslation } from "react-i18next";  

const i18nProvider = {
  translate: (key, params) => t(key, params),
  changeLocale: (lang) => i18n.changeLanguage(lang),
  getLocale: () => i18n.language,
};
function App() {
  const { t, i18n } = useTranslation();

  return (
    <Refine
      routerProvider={routerProvider}
      notificationProvider={notificationProvider}
      Layout={Layout}
      dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
      resources={[
        {
          name: "firstBuyer/addBankAccount",
          meta: {
            label: t("resources.firstBuyer/addBankAccount"),
          },
        },
      ]}
      i18nProvider={i18nProvider}
    />
  );
}

export default App;

Step 3: Use the Custom Labels in Notifications When performing actions like creating, deleting, or editing resources, you can use the custom labels from the i18n provider in your notifications. Here’s an example of how you might handle a delete action:

``javascript
import { useMutation } from "@refinedev/core";
import { notification } from "antd";
import { useTranslation } from "react-i18next";

const useCustomDelete = () => {
  const { t } = useTranslation();
  const { mutate: deleteOne } = useMutation();

  const customDelete = (params) => {
    deleteOne({
      ...params,
      successNotification: (data, variables, resource) => ({
        message: t("notifications.deleteSuccess", { resource: t(

resources.${resource}`) }), type: "success", }), errorNotification: (error, variables, resource) => ({ message: t("notifications.deleteError", { ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

Can I extract meta values to put in the notififications lookup

Did you find this page helpful?