Skip to main content
Version: 4.xx.xx

4. Generating CRUD pages automatically with Inferencer

Inferencer​

Inferencer is a powerful tool in the refine ecosystem that helps developers quickly generate CRUD (create, read, update, delete) pages for their data model. It analyzes your data model based on the resource scheme and automatically creates the pages with the required forms and tables for CRUD operations.

Why use Inferencer?​

There are several benefits to using Inferencer:

  1. The goal of Inferencer is to reduce the amount of time spent on creating views for resources by generating the code automatically. This can save developers a significant amount of time and effort, especially on large projects with many resources.

  2. Code generated by Inferencer is also easy to customize. Instead of starting from scratch, you can use the auto-generated code as a starting point and make changes to it according to your needs. This allows you to quickly iterate and get your project up and running faster.

  3. Using Inferencer can also help you avoid common mistakes that can arise when building CRUD pages manually. This can help you avoid bugs and other issues that can arise during development.

Overall, using Inferencer will greatly speed up development time and reduce the amount of code that needs to be written manually. It helps ensure that your CRUD pages are consistent and adhere to best practices, allowing you to focus on more complex tasks instead.

Learn Inferencer​

You can Learn more about how Inferencer works and how to use it with Headless Mode in our documents.

How to use Inferencer​

The @refinedev/inferencer package provides the <HeadlessInferencer/> component, which can be imported from @refinedev/inferencer/headless. It is used to generate CRUD pages based on your API response.

Before we start using Inferencer, we need to add the @refinedev/react-hook-form and @refinedev/react-table packages to our project. Since these packages are used by Inferencer to generate forms and tables, they need to be installed in our project.

npm i @refinedev/react-table @refinedev/react-hook-form

Then, we need to add the <HeadlessInferencer/> component which is used by passing appropriate values to the resources prop of the <Refine/> component in App.tsx as shown below:

info

The resources prop will be explained in detail in [Unit 4](/docs/tutorial/understanding-resources/index. For now, you can assume that the resource is a collection of data on your API used in the app.

src/App.tsx
import { Refine } from '@refinedev/core'
import routerBindings, {
  UnsavedChangesNotifier,
} from '@refinedev/react-router-v6'
import dataProvider from '@refinedev/simple-rest'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { HeadlessInferencer } from '@refinedev/inferencer/headless'

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerBindings}
        dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
        resources={[
          {
            name: 'blog_posts',
            list: '/blog-posts',
            show: '/blog-posts/show/:id',
            create: '/blog-posts/create',
            edit: '/blog-posts/edit/:id',
          },
        ]}
        options={{
          syncWithLocation: true,
          warnWhenUnsavedChanges: true,
        }}
      >
        <Routes>
          <Route path="blog-posts">
            <Route index element={<HeadlessInferencer />} />
            <Route path="show/:id" element={<HeadlessInferencer />} />
            <Route path="edit/:id" element={<HeadlessInferencer />} />
            <Route path="create" element={<HeadlessInferencer />} />
          </Route>
        </Routes>
        <UnsavedChangesNotifier />
      </Refine>
    </BrowserRouter>
  )
}
export default App

At this point, refine will automatically generate the CRUD pages for the blog_posts resource based on the API response.

Preview the auto-generated pages​

So far we have added complete CRUD pages by utilizing the Inferencer feature to the project. Let's take a look at the auto-generated CRUD pages that Inferencer handles for us.

Before we start, let's understand the API that we will be using in this tutorial. We will be using the https://api.fake-rest.refine.dev API. This API is created by the refine team and is used for demo purposes. It is a simple REST API that contains some resources like blog_posts, categories, etc.

info

How refine apps communicate with the API via the dataProvider will be explained in Unit 3.

You can view the code generated by Inferencer by clicking the "Show Code" button in the right corner of the live preview below.

List Page​

To preview the list page, go back to your browser and go to localhost:3000.

You should see the list page for the blog_posts resource that was generated by Inferencer like below:

note

When you navigate to the localhost:3000, refine will redirect you to the initial resource's list page registered to <Refine/> component, like localhost:3000/blog-posts

http://localhost:3000
setInitialRoutes(['/blog-posts'])

import { Refine } from '@refinedev/core'
import routerBindings, {
  NavigateToResource,
  UnsavedChangesNotifier,
} from '@refinedev/react-router-v6'
import dataProvider from '@refinedev/simple-rest'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { HeadlessInferencer } from '@refinedev/inferencer/headless'

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerBindings}
        dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
        resources={[
          {
            name: 'blog_posts',
            list: '/blog-posts',
            show: '/blog-posts/show/:id',
            create: '/blog-posts/create',
            edit: '/blog-posts/edit/:id',
          },
        ]}
        options={{
          syncWithLocation: true,
          warnWhenUnsavedChanges: true,
        }}
      >
        <Routes>
          <Route index element={<NavigateToResource resource="blog_posts" />} />
          <Route path="blog-posts">
            <Route index element={<HeadlessInferencer />} />
            <Route path="show/:id" element={<HeadlessInferencer />} />
            <Route path="edit/:id" element={<HeadlessInferencer />} />
            <Route path="create" element={<HeadlessInferencer />} />
          </Route>
        </Routes>
        <UnsavedChangesNotifier />
      </Refine>
    </BrowserRouter>
  )
}

render(<App />)

Create Page​

To preview the create page, go back to your browser and go to localhost:3000/blog-posts/create or click the "Create" button on the list page.

You should see the create page for the blog_posts resource that was generated by Inferencer like below:

http://localhost:3000
setInitialRoutes(['/blog-posts/create'])

import { Refine } from '@refinedev/core'
import { HeadlessInferencer } from '@refinedev/inferencer/headless'
import routerBindings, {
  UnsavedChangesNotifier,
} from '@refinedev/react-router-v6'
import dataProvider from '@refinedev/simple-rest'
import { BrowserRouter, Route, Routes } from 'react-router-dom'

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerBindings}
        dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
        resources={[
          {
            name: 'blog_posts',
            list: '/blog-posts',
            show: '/blog-posts/show/:id',
            create: '/blog-posts/create',
            edit: '/blog-posts/edit/:id',
          },
        ]}
        options={{
          syncWithLocation: true,
          warnWhenUnsavedChanges: true,
        }}
      >
        <Routes>
          <Route path="blog-posts">
            <Route index element={<HeadlessInferencer />} />
            <Route path="show/:id" element={<HeadlessInferencer />} />
            <Route path="edit/:id" element={<HeadlessInferencer />} />
            <Route path="create" element={<HeadlessInferencer />} />
          </Route>
        </Routes>
        <UnsavedChangesNotifier />
      </Refine>
    </BrowserRouter>
  )
}
render(<App />)

Edit Page​

To preview the edit page, go back to your browser and go to localhost:3000/blog-posts/edit/123 or click the "Edit" button on the record in the list page.

You should see the edit page for the blog_posts resource with the id 123 that was generated by Inferencer like below:

http://localhost:3000
setInitialRoutes(['/blog-posts/edit/123'])

import { Refine } from '@refinedev/core'
import { HeadlessInferencer } from '@refinedev/inferencer/headless'
import routerBindings, {
  UnsavedChangesNotifier,
} from '@refinedev/react-router-v6'
import dataProvider from '@refinedev/simple-rest'
import { BrowserRouter, Route, Routes } from 'react-router-dom'

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerBindings}
        dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
        resources={[
          {
            name: 'blog_posts',
            list: '/blog-posts',
            show: '/blog-posts/show/:id',
            create: '/blog-posts/create',
            edit: '/blog-posts/edit/:id',
          },
        ]}
        options={{
          syncWithLocation: true,
          warnWhenUnsavedChanges: true,
        }}
      >
        <Routes>
          <Route path="blog-posts">
            <Route index element={<HeadlessInferencer />} />
            <Route path="show/:id" element={<HeadlessInferencer />} />
            <Route path="edit/:id" element={<HeadlessInferencer />} />
            <Route path="create" element={<HeadlessInferencer />} />
          </Route>
        </Routes>
        <UnsavedChangesNotifier />
      </Refine>
    </BrowserRouter>
  )
}
render(<App />)

Show Page​

To preview the show page, go back to your browser and go to localhost:3000/blog-posts/show/123 or click the "Show" button on the record in the list page.

You should see the show page for the blog_posts resource with the id 123 that was generated by Inferencer like below:

http://localhost:3000
setInitialRoutes(['/blog-posts/show/123'])

import { Refine } from '@refinedev/core'
import { HeadlessInferencer } from '@refinedev/inferencer/headless'
import routerBindings, {
  UnsavedChangesNotifier,
} from '@refinedev/react-router-v6'
import dataProvider from '@refinedev/simple-rest'
import { BrowserRouter, Route, Routes } from 'react-router-dom'

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerBindings}
        dataProvider={dataProvider('https://api.fake-rest.refine.dev')}
        resources={[
          {
            name: 'blog_posts',
            list: '/blog-posts',
            show: '/blog-posts/show/:id',
            create: '/blog-posts/create',
            edit: '/blog-posts/edit/:id',
          },
        ]}
        options={{
          syncWithLocation: true,
          warnWhenUnsavedChanges: true,
        }}
      >
        <Routes>
          <Route path="blog-posts">
            <Route index element={<HeadlessInferencer />} />
            <Route path="show/:id" element={<HeadlessInferencer />} />
            <Route path="edit/:id" element={<HeadlessInferencer />} />
            <Route path="create" element={<HeadlessInferencer />} />
          </Route>
        </Routes>
        <UnsavedChangesNotifier />
      </Refine>
    </BrowserRouter>
  )
}
render(<App />)


You will learn how to create CRUD pages manually using the code generated by Inferencer as a reference in Unit 5.

Checklist

Create and deploy your first refine app
CURRENT UI FRAMEWORK
Headless