Using Inferencer
Refine's @refinedev/inferencer
package can be used to scaffold initial code for your resource pages based on API responses.
Generated code aren't guaranteed to work perfectly. This tool meant to be used locally to speed up the development process by generating the initial code and shouldn't be used on production.
Installation
Let's start by installing the @refinedev/inferencer
package. Inferencer package can generate views with multiple UI libraries that Refine provides a built-in support for. To generate a view with a UI library, you need to install their dependencies as well (e.g. @refinedev/antd
and antd
packages for Ant Design).
Supported UI libraries for Inferencer are:
- npm
- pnpm
- yarn
npm i @refinedev/inferencer
pnpm add @refinedev/inferencer
yarn add @refinedev/inferencer
Usage
Inferencer package exports UI specific inferencer components with sub-paths for each UI library. For example, to use Inferencer with Ant Design, you need to import AntdInferencer
from @refinedev/inferencer/antd
.
import { AntdInferencer } from "@refinedev/inferencer/antd";
export const MyPage = () => {
return <AntdInferencer resource="products" action="list" />;
};
In the example above, we are using AntdInferencer
to generate a list view for the products
resource. The action
prop is used to specify the type of view to be generated. The available actions are list
, show
, edit
, and create
.
After you have mounted the Inferencer component, you will get a preview of the generated view for the specified action of the resource and provided with the source code of the generated component. You can copy & paste the generated code and customize it to fit your application's needs.
Using Inferencer for the Categories Resource
In our application, we've used the categories
resource in relation to the products
resource. Now we will use inferencer component to generate a list view for the categories
resource.
Let's start by creating a new file called src/pages/categories/list.tsx
file.
Then let's create a route at /categories
to render the ListCategories
component.
Update your src/App.tsx
file by adding the following lines:
import { Refine, Authenticated } from "@refinedev/core";
import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
import {
ThemedLayoutV2,
ThemedTitleV2,
useNotificationProvider,
} from "@refinedev/antd";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { ConfigProvider, App as AntdApp } from "antd";
import { dataProvider } from "./providers/data-provider";
import { authProvider } from "./providers/auth-provider";
import { ShowProduct } from "./pages/products/show";
import { EditProduct } from "./pages/products/edit";
import { ListProducts } from "./pages/products/list";
import { CreateProduct } from "./pages/products/create";
import { ListCategories } from "./pages/categories/list";
import { Login } from "./pages/login";
import "antd/dist/reset.css";
export default function App(): JSX.Element {
return (
<BrowserRouter>
<ConfigProvider>
<AntdApp>
<Refine
dataProvider={dataProvider}
authProvider={authProvider}
routerProvider={routerProvider}
notificationProvider={useNotificationProvider}
resources={[
{
name: "protected-products",
list: "/products",
show: "/products/:id",
edit: "/products/:id/edit",
create: "/products/create",
meta: { label: "Products" },
},
// We're adding the categories resource to the resources array
// This way, there will be a link to the categories list in the sidebar
{
name: "categories",
list: "/categories",
meta: { label: "Categories" },
},
]}
>
<Routes>
<Route
element={
<Authenticated
key="authenticated-routes"
redirectOnFail="/login"
>
<ThemedLayoutV2
Title={(props) => (
<ThemedTitleV2 {...props} text="Awesome Project" />
)}
>
<Outlet />
</ThemedLayoutV2>
</Authenticated>
}
>
<Route
index
element={<NavigateToResource resource="protected-products" />}
/>
<Route path="/products">
<Route index element={<ListProducts />} />
<Route path=":id" element={<ShowProduct />} />
<Route path=":id/edit" element={<EditProduct />} />
<Route path="create" element={<CreateProduct />} />
</Route>
<Route path="/categories">
<Route index element={<ListCategories />} />
</Route>
</Route>
<Route
element={
<Authenticated key="auth-pages" fallback={<Outlet />}>
<NavigateToResource resource="protected-products" />
</Authenticated>
}
>
<Route path="/login" element={<Login />} />
</Route>
</Routes>
</Refine>
</AntdApp>
</ConfigProvider>
</BrowserRouter>
);
}
We've mounted the ListCategories
component to the /categories
route and added the categories
resource to the resources
array, which enables the sidebar will automatically have a link to the categories list.
Now let's add Inferencer to the ListCategories
component.
Update your src/pages/categories/list.tsx
file by adding the following lines:
import { AntdInferencer } from "@refinedev/inferencer/antd";
export const ListCategories = () => {
return (
<AntdInferencer
// resource="categories" // We're omitting this prop because it's inferred from the route
// action="list" // We're omitting this prop because it's inferred from the route
/>
);
};
Notice that we've not provided the resource
and action
props to the AntdInferencer
component because they are inferred from the route.
Now, if you navigate to the /categories
route, you will see the generated list view for the categories
resource. Then you can copy & paste the generated code and customize it to fit your application's needs.
In this step, we've covered the basics of using Inferencer to generate views for resources. In the next step, we'll be learning about the Refine's CLI and its features.
import React from "react"; import { AuthPage } from "@refinedev/antd"; export const Login = () => { return ( <AuthPage type="login" formProps={{ initialValues: { email: "demo@demo.com", password: "demodemo", }, }} /> ); };