Version: 4.xx.xx
On this page
You can automatically generate views for your resources using @refinedev/inferencer
. Inferencer exports HeadlessListInferencer
, HeadlessShowInferencer
, HeadlessEditInferencer
, HeadlessCreateInferencer
and HeadlessInferencer
(which combines all in one place) components.
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 " /> ) ; } ;
To learn more about @refinedev/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 @refinedev/react-table
.
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 /> } /> < 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 useShow
hook from @refinedev/core
.
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 /> } /> < 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 useForm
hook from @refinedev/react-hook-form
.
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 /> } /> { } < 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 useForm
hook from @refinedev/react-hook-form
.
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 /> } /> { } < 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.
npm create refine-app@latest -- --example inferencer-headless