Skip to main content
Unlock powerful debugging and effortless query monitoring with Refine DevtoolsLearn More
RefineDocumentation
Version: 4.xx.xx

Inferencer

You can automatically generate views for your resources using @refinedev/inferencer. Inferencer exports HeadlessListInferencer, HeadlessShowInferencer, HeadlessEditInferencer, HeadlessCreateInferencer, and finally HeadlessInferencer components, the last of which combines all in one place.

Good to know:
  • Headless elements of @refinedev/inferencer uses @refinedev/react-hook-form and @refinedev/react-table to create views. These dependencies should be installed in your project in order to use inferencer components.
  • To learn more about the @refinedev/inferencer package, please check out Inferencer docs.

Usage​

Inferencer components can be imported from @refinedev/inferencer/headless. 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 routerProvider from "@refinedev/react-router-v6";
import { BrowserRouter } from "react-router-dom";
import { HeadlessInferencer } from "@refinedev/inferencer/headless";

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerProvider}
        resources={[
          {
            name: "samples",
            list: "/posts",
          },
        ]}
      >
        <Routes>
          <Route path="/posts" element={<HeadlessInferencer />} />
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

Views​

List​

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

localhost:3000/samples
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

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

import { HeadlessInferencer } from "@refinedev/inferencer/headless";

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

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerProvider}
        dataProvider={dataProvider(API_URL)}
        resources={[
          {
            name: "samples",
            list: "/samples",
            show: "/samples/show/:id",
            create: "/samples/create",
            edit: "/samples/edit/:id",
          },
        ]}
      >
        <Routes>
          {/** highlight-next-line */}
          <Route path="/samples" element={<HeadlessInferencer />} />
          <Route path="/samples/create" element={<HeadlessInferencer />} />
          <Route path="/samples/show/:id" element={<HeadlessInferencer />} />
          <Route path="/samples/edit/:id" element={<HeadlessInferencer />} />
          <Route path="*" element={<div>Not Found</div>} />
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

Show​

Generates a sample show view for your resources according to the API response. It uses the useShow hook from @refinedev/core.

localhost:3000/samples/show/123
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

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

import { HeadlessInferencer } from "@refinedev/inferencer/headless";

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

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerProvider}
        dataProvider={dataProvider(API_URL)}
        resources={[
          {
            name: "samples",
            list: "/samples",
            show: "/samples/show/:id",
            create: "/samples/create",
            edit: "/samples/edit/:id",
          },
        ]}
      >
        <Routes>
          <Route path="/samples" element={<HeadlessInferencer />} />
          <Route path="/samples/create" element={<HeadlessInferencer />} />
          {/** highlight-next-line */}
          <Route path="/samples/show/:id" element={<HeadlessInferencer />} />
          <Route path="/samples/edit/:id" element={<HeadlessInferencer />} />
          <Route path="*" element={<div>Not Found</div>} />
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

Create​

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

localhost:3000/samples/create
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

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

import { HeadlessInferencer } from "@refinedev/inferencer/headless";

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

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerProvider}
        dataProvider={dataProvider(API_URL)}
        resources={[
          {
            name: "samples",
            list: "/samples",
            create: "/samples/create",
            show: "/samples/show/:id",
            edit: "/samples/edit/:id",
          },
        ]}
      >
        <Routes>
          <Route path="/samples" element={<HeadlessInferencer />} />
          {/** highlight-next-line */}
          <Route path="/samples/create" element={<HeadlessInferencer />} />
          <Route path="/samples/show/:id" element={<HeadlessInferencer />} />
          <Route path="/samples/edit/:id" element={<HeadlessInferencer />} />
          <Route path="*" element={<div>Not Found</div>} />
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

Edit​

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

localhost:3000/samples/edit/123
import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";

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

import { HeadlessInferencer } from "@refinedev/inferencer/headless";

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

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerProvider}
        dataProvider={dataProvider(API_URL)}
        resources={[
          {
            name: "samples",
            list: "/samples",
            show: "/samples/show/:id",
            create: "/samples/create",
            edit: "/samples/edit/:id",
          },
        ]}
      >
        <Routes>
          <Route path="/samples" element={<HeadlessInferencer />} />
          <Route path="/samples/create" element={<HeadlessInferencer />} />
          <Route path="/samples/show/:id" element={<HeadlessInferencer />} />
          {/** highlight-next-line */}
          <Route path="/samples/edit/:id" element={<HeadlessInferencer />} />
          <Route path="*" element={<div>Not Found</div>} />
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

Example​

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

View Source Code
Run on your local
npm create refine-app@latest -- --example inferencer-headless
Previous
<AutoSaveIndicator />
Next
useModal
Was this helpful?