Skip to main content
Refine AI
RefineDocumentation
Version: 4.xx.xx

Inferencer

You can automatically generate views for your resources using @refinedev/inferencer. Inferencer exports MantineListInferencer, MantineShowInferencer, MantineEditInferencer, MantineCreateInferencer components and finally the MantineInferencer component, which combines all in one place.

Usage​

Inferencer components can be imported from @refinedev/inferencer/mantine. 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 { Layout, Global } from "@refinedev/mantine";
import { MantineProvider, LightTheme } from "@mantine/core";

import { MantineInferencer } from "@refinedev/inferencer/mantine";

const App = () => {
  return (
    <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>
      <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
      <BrowserRouter>
        <Refine
          routerProvider={routerProvider}
          resources={[
            {
              name: "samples",
              list: "/samples",
            },
          ]}
        >
          <Routes>
            <Route path="/samples" element={<MantineInferencer />} />
          </Routes>
        </Refine>
      </BrowserRouter>
    </MantineProvider>
  );
};

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

Views​

List​

Generates a sample list view for your resources according to the API response. It uses the List component and from @refinedev/mantine and the useTable hook from @refinedev/react-table.

localhost:3000/samples
import { Refine } from "@refinedev/core";
import { ThemedLayoutV2, RefineThemes } from "@refinedev/mantine";
import { MantineProvider, Global } from "@mantine/core";
import routerProvider from "@refinedev/react-router";
import dataProvider from "@refinedev/simple-rest";

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

import { MantineInferencer } from "@refinedev/inferencer/mantine";

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

const App: React.FC = () => {
  return (
    <MantineProvider
      theme={RefineThemes.Blue}
      withNormalizeCSS
      withGlobalStyles
    >
      <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
      <BrowserRouter>
        <Refine
          routerProvider={routerProvider}
          dataProvider={dataProvider(API_URL)}
          resources={[
            {
              name: "samples",
              list: "/samples",
            },
          ]}
        >
          <Routes>
            <Route
              element={
                <ThemedLayoutV2>
                  <Outlet />
                </ThemedLayoutV2>
              }
            >
              <Route path="/samples" element={<MantineInferencer />} />
            </Route>
          </Routes>
        </Refine>
      </BrowserRouter>
    </MantineProvider>
  );
};

Show​

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

localhost:3000/samples/show/123
import { Refine } from "@refinedev/core";
import { ThemedLayoutV2, RefineThemes } from "@refinedev/mantine";
import { MantineProvider, Global } from "@mantine/core";
import routerProvider from "@refinedev/react-router";
import dataProvider from "@refinedev/simple-rest";

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

import { MantineInferencer } from "@refinedev/inferencer/mantine";

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

const App: React.FC = () => {
  return (
    <MantineProvider
      theme={RefineThemes.Blue}
      withNormalizeCSS
      withGlobalStyles
    >
      <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
      <BrowserRouter>
        <Refine
          routerProvider={routerProvider}
          dataProvider={dataProvider(API_URL)}
          resources={[
            {
              name: "samples",
              show: "/samples/show/:id",
            },
          ]}
        >
          <Routes>
            <Route
              element={
                <ThemedLayoutV2>
                  <Outlet />
                </ThemedLayoutV2>
              }
            >
              <Route path="/samples/show/:id" element={<MantineInferencer />} />
            </Route>
          </Routes>
        </Refine>
      </BrowserRouter>
    </MantineProvider>
  );
};

Create​

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

localhost:3000/samples/create
import { Refine } from "@refinedev/core";
import { ThemedLayoutV2, RefineThemes } from "@refinedev/mantine";
import { MantineProvider, Global } from "@mantine/core";
import routerProvider from "@refinedev/react-router";
import dataProvider from "@refinedev/simple-rest";

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

import { MantineInferencer } from "@refinedev/inferencer/mantine";

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

const App: React.FC = () => {
  return (
    <MantineProvider
      theme={RefineThemes.Blue}
      withNormalizeCSS
      withGlobalStyles
    >
      <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
      <BrowserRouter>
        <Refine
          routerProvider={routerProvider}
          dataProvider={dataProvider(API_URL)}
          resources={[
            {
              name: "samples",
              create: "/samples/create",
            },
          ]}
        >
          <Routes>
            <Route
              element={
                <ThemedLayoutV2>
                  <Outlet />
                </ThemedLayoutV2>
              }
            >
              <Route path="/samples/create" element={<MantineInferencer />} />
            </Route>
          </Routes>
        </Refine>
      </BrowserRouter>
    </MantineProvider>
  );
};

Edit​

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

localhost:3000/samples/edit/123
import { Refine } from "@refinedev/core";
import { RefineThemes, ThemedLayoutV2 } from "@refinedev/mantine";
import { MantineProvider, Global } from "@mantine/core";
import routerProvider from "@refinedev/react-router";
import dataProvider from "@refinedev/simple-rest";

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

import { MantineInferencer } from "@refinedev/inferencer/mantine";

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

const App: React.FC = () => {
  return (
    <MantineProvider
      theme={RefineThemes.Blue}
      withNormalizeCSS
      withGlobalStyles
    >
      <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
      <BrowserRouter>
        <Refine
          routerProvider={routerProvider}
          dataProvider={dataProvider(API_URL)}
          resources={[
            {
              name: "samples",
              edit: "/samples/edit/:id",
            },
          ]}
        >
          <Routes>
            <Route
              element={
                <ThemedLayoutV2>
                  <Outlet />
                </ThemedLayoutV2>
              }
            >
              <Route path="/samples/edit/:id" element={<MantineInferencer />} />
            </Route>
          </Routes>
        </Refine>
      </BrowserRouter>
    </MantineProvider>
  );
};

Example​

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

View Source Code
Run on your local
npm create refine-app@latest -- --example inferencer-mantine
Previous
<AutoSaveIndicator />
Next
Create