Skip to main content
Unlock powerful debugging and effortless query monitoring with refine DevtoolsLearn More
Documentation
Version: 3.xx.xx

Inferencer

You can automatically generate views for your resources using @pankod/refine-inferencer. Inferencer exports HeadlessListInferencer, HeadlessShowInferencer, HeadlessEditInferencer, HeadlessCreateInferencer and HeadlessInferencer (which combines all in one place) components.

Dependencies
Dependencies

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

Make sure you include them in your dependencies.

Usage​

Ant Design components can be imported from @pankod/refine-inferencer/headless. You can directly use the components in resources prop of Refine component or you can use them in your custom components by passing the resource prop as the resource name.

import { HeadlessInferencer } from "@pankod/refine-inferencer/headless";

const App = () => {
  return (
    <Refine
      resources={[
        {
          name: "samples",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
          create: HeadlessInferencer,
          edit: HeadlessInferencer,
        },
      ]}
    />
  );
};
INFORMATION

To learn more about @pankod/refine-inferencer package, please check out Docs

Views​

List​

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

localhost:3000/samples
Live previews only work with the latest documentation.
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import { HeadlessInferencer } from "@pankod/refine-inferencer/headless";

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

const App: React.FC = () => {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={dataProvider(API_URL)}
      resources={[
        {
          name: "samples",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
          create: HeadlessInferencer,
          edit: HeadlessInferencer,
          canDelete: true,
        },
        {
          name: "categories",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
        },
        {
          name: "tags",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
        },
      ]}
    />
  );
};

Show​

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

localhost:3000/samples/show/123
Live previews only work with the latest documentation.
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import { HeadlessInferencer } from "@pankod/refine-inferencer/headless";

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

const App: React.FC = () => {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={dataProvider(API_URL)}
      resources={[
        {
          name: "samples",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
          create: HeadlessInferencer,
          edit: HeadlessInferencer,
          canDelete: true,
        },
        {
          name: "categories",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
        },
        {
          name: "tags",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
        },
      ]}
    />
  );
};

Create​

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

localhost:3000/samples/create
Live previews only work with the latest documentation.
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import { HeadlessInferencer } from "@pankod/refine-inferencer/headless";

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

const App: React.FC = () => {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={dataProvider(API_URL)}
      resources={[
        {
          name: "samples",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
          create: HeadlessInferencer,
          edit: HeadlessInferencer,
          canDelete: true,
        },
        {
          name: "categories",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
        },
        {
          name: "tags",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
        },
      ]}
    />
  );
};

Edit​

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

localhost:3000/samples/edit/123
Live previews only work with the latest documentation.
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import { HeadlessInferencer } from "@pankod/refine-inferencer/headless";

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

const App: React.FC = () => {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={dataProvider(API_URL)}
      resources={[
        {
          name: "samples",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
          create: HeadlessInferencer,
          edit: HeadlessInferencer,
          canDelete: true,
        },
        {
          name: "categories",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
        },
        {
          name: "tags",
          list: HeadlessInferencer,
          show: HeadlessInferencer,
        },
      ]}
    />
  );
};

Example​

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

View Source Code
Run on your local
npm create refine-app@latest -- --example inferencer-headless
Previous
<LayoutWrapper>
Next
<Authenticated>