Skip to main content
Version: 3.xx.xx

Resources

Remember

In the Unit 2.4, we have defined a resource to create our CRUD pages with the Inferencer component. However, we have not explained how it works. In this unit, we will explain the resources prop of the <Refine/> component using the mock components.

Before we start, let's understand what is <Refine/> component.

The <Refine/> is the starting point of the refine app. It is a wrapper component that provides the context to the refine components and hooks. It is used to configure the highest level settings of the app.

In order to initialize the app, the dataProvider and routerProvider props must be provided. Additionally, it also has other props such as resources, authProvider, i18nProvider, Layout etc. These props allow for the configuration of different aspects of the app, including data management, routing, authentication, localization, layout etc.

Refer to the <Refine/> documentation for more information β†’

In the context of a CRUD application, a resource typically refers to a data entity that can be created, read, updated, or deleted. For example, a resource could be a user account, a blog post, a product in an online store, or any other piece of data that can be managed by the CRUD app.

To add a resource to our app, we need use resources prop of <Refine/> component. This prop accepts an array of objects. Each object represents a resource.

src/App.tsx
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

const App: React.FC = () => {
return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
resources={[
{
name: "products",
list: () => <div>Products List Page</div>,
show: <div>Product Detail Page</div>,
create: <div>Product Create Page</div>,
edit: <div>Product Edit Page</div>,
},
]}
/>
);
};

export default App;

In the above example, we have added a resource with name products. This resource will have 5 pages that assigned to list, show, create, and edit properties. refine link the pages with routes for us.

When we define create, clone page will be generated automatically. We can access these pages by visiting the following routes:

  • /products - Product List Page
  • /products/show/:id - Product Detail Page
  • /products/create - Product Create Page
  • /products/clone/:id - Product Clone Page
  • /products/edit/:id - Product Edit Page
tip

When using the refine hooks and components in the created pages, the name property of the resource will be passed to the dataProvider functions, by default.

Learn More​

Learn more about resources in the API reference.

Checklist

Understanding the Resources
CURRENT UI FRAMEWORK
Headless