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.

Dependencies

@refinedev/inferencer/headless uses @refinedev/react-hook-form and @refinedev/react-table to create views.

Make sure you include them in your dependencies.

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.

Without Props
With Explicit Props

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>
    );
};

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

const SampleList = () => {
    return (
        <HeadlessInferencer resource="samples" action="list" />
    );
};

const SampleShow = () => {
    return (
        <HeadlessInferencer resource="samples" action="show" id="1" />
    );
};

const SampleCreate = () => {
    return (
        <HeadlessInferencer resource="samples" action="create" />
    );
};

const SampleEdit = () => {
    return (
        <HeadlessInferencer resource="samples" action="edit" id="1" />
    );
};

INFORMATION

To learn more about the @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 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

Usage​

Views​

List​

Show​

Create​

Edit​

Example​