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.
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 the @refinedev/inferencer
package, please check out Docs
Generates a sample list view for your resources according to the API response. It uses the useTable
hook from @refinedev/react-table
.
Show Code Hide Code 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 > ) ; } ;
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
Show Code Hide Code 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 > ) ; } ;
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
Show Code Hide Code 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 > ) ; } ;
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
Show Code Hide Code 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