rival-black•7mo ago

refine mui

i am getting this error when i am trying to use the materialui notificationprovider Error: Objects are not valid as a React child (found: object with keys {resource}). If you meant to render a collection of children, use an array instead.

2 Replies

kapa.ai•7mo ago

Hi @Alex YT. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This error might be related to the way you're using the NotificationProvider with Material UI in your Refine application. The NotificationProvider is used to manage notifications in your application. When using it with Material UI, you should use the useNotificationProvider hook from the @refinedev/mui package and pass it to the notificationProvider prop of the <Refine /> component. Here is an example of how to do it:

import { Refine } from "@refinedev/core";  
import { useNotificationProvider } from "@refinedev/mui";  
  
const App = () => {  
 return (  
 <Refine notificationProvider={useNotificationProvider}>  
 {/* ... */}  
 </Refine>  
 );  
};

import { Refine } from "@refinedev/core";  
import { useNotificationProvider } from "@refinedev/mui";  
  
const App = () => {  
 return (  
 <Refine notificationProvider={useNotificationProvider}>  
 {/* ... */}  
 </Refine>  
 );  
};

(Source: Refine Documentation (https://refine.dev/docs/ui-integrations/material-ui/introduction#notifications)) Also, ensure that you're using the <RefineSnackbarProvider /> to manage notifications through notistack. This component is a wrapper of the SnackbarProvider component of the notistack package. If you're still facing issues, it might be related to how you're handling error notifications in your hooks. For instance, in the useUpdate or useAutocomplete hooks, you can customize the error notification that shows up when data fetching fails. Make sure you're returning an object with the correct properties (message, description, type) in your errorNotification prop:

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

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

(Source: Refine Documentation (https://refine.dev/docs/data/hooks/use-update#errornotification)) If the error persists, it might be a bug in the library. In such cases, it's recommended to open an issue in the Refine GitHub repository (https://github.com/refinedev/refine/issues). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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