Skip to main content
🧙‍♂️ refine grants your wishes! Please give us a ⭐️ on GitHub to keep the magic going.
Version: 4.xx.xx

Inferencer

You can automatically generate views for your resources using @refinedev/inferencer. Inferencer exports MuiListInferencer, MuiShowInferencer, MuiEditInferencer, MuiCreateInferencer components and finally the MuiInferencer component, which combines all in one place.

Usage

Inferencer components can be imported from @refinedev/inferencer/mui. You can directly use the components in your routes without passing any props. If you use a routerProvider, it will infer the resource, action and id from the current route.

import {
ThemedLayoutV2,
RefineThemes,
RefineSnackbarProvider,
} from "@refinedev/mui";
import { CssBaseline, GlobalStyles } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import { MuiInferencer } from "@refinedev/inferencer/mui";

const App = () => {
return (
<BrowserRouter>
<ThemeProvider theme={RefineThemes.Blue}>
<CssBaseline />
<GlobalStyles
styles={{ html: { WebkitFontSmoothing: "auto" } }}
/>
<RefineSnackbarProvider>
<Refine
dataProvider={dataProvider(API_URL)}
routerProvider={routerProvider}
resources={[
{
name: "samples",
list: "/samples",
},
]}
>
<Routes>
<Route
element={
<ThemedLayoutV2>
<Outlet />
</ThemedLayoutV2>
}
>
<Route
path="/samples"
element={<MuiInferencer />}
/>
</Route>
</Routes>
</Refine>
</RefineSnackbarProvider>
</ThemeProvider>
</BrowserRouter>
);
};
INFORMATION

To learn more about @refinedev/inferencer package, please check out Docs

Views

List

Generates a sample list view for your resources according to the API response. It uses the List component and useDatagrid hook from @refinedev/mui.

localhost:3000/samples
import { Refine } from "@refinedev/core";

import {
ThemedLayoutV2,
RefineThemes,
RefineSnackbarProvider,
} from "@refinedev/mui";
import { CssBaseline, GlobalStyles } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";

import routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import dataProvider from "@refinedev/simple-rest";

import { MuiInferencer } from "@refinedev/inferencer/mui";

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

const App: React.FC = () => {
return (
<BrowserRouter>
<ThemeProvider theme={RefineThemes.Blue}>
<CssBaseline />
<GlobalStyles
styles={{ html: { WebkitFontSmoothing: "auto" } }}
/>
<RefineSnackbarProvider>
<Refine
dataProvider={dataProvider(API_URL)}
routerProvider={routerProvider}
resources={[
{
name: "samples",
list: "/samples",
},
]}
>
<Routes>
<Route
element={
<ThemedLayoutV2>
<Outlet />
</ThemedLayoutV2>
}
>
<Route
path="/samples"
element={<MuiInferencer />}
/>
</Route>
</Routes>
</Refine>
</RefineSnackbarProvider>
</ThemeProvider>
</BrowserRouter>
);
};

Show

Generates a sample show view for your resources according to the API response. It uses Show and field components from @refinedev/mui with useShow hook from @refinedev/core.

localhost:3000/samples/show/123
import { Refine } from "@refinedev/core";

import {
ThemedLayoutV2,
RefineThemes,
RefineSnackbarProvider,
} from "@refinedev/mui";
import { CssBaseline, GlobalStyles } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";

import routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import dataProvider from "@refinedev/simple-rest";

import { MuiInferencer } from "@refinedev/inferencer/mui";

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

const App: React.FC = () => {
return (
<BrowserRouter>
<ThemeProvider theme={RefineThemes.Blue}>
<CssBaseline />
<GlobalStyles
styles={{ html: { WebkitFontSmoothing: "auto" } }}
/>
<RefineSnackbarProvider>
<Refine
dataProvider={dataProvider(API_URL)}
routerProvider={routerProvider}
resources={[
{
name: "samples",
show: "/samples/show/:id",
},
]}
>
<Routes>
<Route
element={
<ThemedLayoutV2>
<Outlet />
</ThemedLayoutV2>
}
>
<Route
path="/samples/show/:id"
element={<MuiInferencer />}
/>
</Route>
</Routes>
</Refine>
</RefineSnackbarProvider>
</ThemeProvider>
</BrowserRouter>
);
};

Create

Generates a sample create view for your resources according to the first record in list API response. It uses the Create component from @refinedev/mui and useForm hook from @refinedev/react-hook-form.

localhost:3000/samples/create
import { Refine } from "@refinedev/core";

import {
ThemedLayoutV2,
RefineThemes,
RefineSnackbarProvider,
} from "@refinedev/mui";
import { CssBaseline, GlobalStyles } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";

import routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import dataProvider from "@refinedev/simple-rest";

import { MuiInferencer } from "@refinedev/inferencer/mui";

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

const App: React.FC = () => {
return (
<BrowserRouter>
<ThemeProvider theme={RefineThemes.Blue}>
<CssBaseline />
<GlobalStyles
styles={{ html: { WebkitFontSmoothing: "auto" } }}
/>
<RefineSnackbarProvider>
<Refine
dataProvider={dataProvider(API_URL)}
routerProvider={routerProvider}
resources={[
{
name: "samples",
create: "/samples/create",
},
]}
>
<Routes>
<Route
element={
<ThemedLayoutV2>
<Outlet />
</ThemedLayoutV2>
}
>
<Route
path="/samples/create"
element={<MuiInferencer />}
/>
</Route>
</Routes>
</Refine>
</RefineSnackbarProvider>
</ThemeProvider>
</BrowserRouter>
);
};

Edit

Generates a sample edit view for your resources according to the API response. It uses Edit component from @refinedev/mui and useForm hook from @refinedev/react-hook-form.

localhost:3000/samples/edit/123
import { Refine } from "@refinedev/core";

import {
ThemedLayoutV2,
RefineThemes,
RefineSnackbarProvider,
} from "@refinedev/mui";
import { CssBaseline, GlobalStyles } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";

import routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

import dataProvider from "@refinedev/simple-rest";

import { MuiInferencer } from "@refinedev/inferencer/mui";

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

const App: React.FC = () => {
return (
<BrowserRouter>
<ThemeProvider theme={RefineThemes.Blue}>
<CssBaseline />
<GlobalStyles
styles={{ html: { WebkitFontSmoothing: "auto" } }}
/>
<RefineSnackbarProvider>
<Refine
dataProvider={dataProvider(API_URL)}
routerProvider={routerProvider}
resources={[
{
name: "samples",
edit: "/samples/edit/:id",
},
]}
>
<Routes>
<Route
element={
<ThemedLayoutV2>
<Outlet />
</ThemedLayoutV2>
}
>
<Route
path="/samples/edit/:id"
element={<MuiInferencer />}
/>
</Route>
</Routes>
</Refine>
</RefineSnackbarProvider>
</ThemeProvider>
</BrowserRouter>
);
};

Example

Below you'll find a Live CodeSandbox Example displaying a fully setup Refine app with @refinedev/inferencer/mui components.

Run on your local
npm create refine-app@latest -- --example inferencer-material-ui