Resources

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 blog post 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.

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: "blog_posts",
          list: () => <div>Blog Posts List Page</div>,
          show: <div>Blog Post Detail Page</div>,
          create: <div>Blog Post Create Page</div>,
          edit: <div>Blog Post Edit Page</div>,
        },
      ]}
    />
  );
};

export default App;

In the above example, we have added a resource with name blog_posts. 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:

• /blog-posts - Blog Post List Page
• /blog-posts/show/:id - Blog Post Detail Page
• /blog-posts/create - Blog Post Create Page
• /blog-posts/clone/:id - Blog Post Clone Page
• /blog-posts/edit/:id - Blog Post Edit Page

Learn More​