Resources

Before we start, we need to understand what the <Refine> component is.

The <Refine> component serves as the starting point for refine. It is a wrapper component that offers context to the refine components and hooks and is used to configure the top-level settings of the application.

Though dataProvider is the only necessary prop for initializing the app, there are other props such as resources, routerProvider, authProvider, i18nProvider, etc. Each of these props enables the configuration of various aspects of the application, such as data management, routing, authentication, localization, layout and more.

For more information, refer to the <Refine> Documentation→

What is resource?​

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 to use the resources prop of the <Refine> component. This prop accepts an array of objects, each representing a resource. These objects may contain properties to define the resource’s name, actions' routes, and additional metadata such as label, icon, audit log settings, and sider menu nesting etc.

Resources and routes​

Path definitions in the resource configuration help refine recognize the available actions for the resource at that particular path. This allows refine to automatically identify the resource based on the current path without requiring users to manually specify the resource prop in their hooks and components.

Thanks to its flexibility, refine can be seamlessly integrated into any existing React application without imposing any limitations on users. It can also be attached to routes where it’s needed without interfering with your routing logic. This makes it possible to use refine with enterprise-grade applications that have complex requirements such as nested routes and multi-tenancy.

import { Refine } from "@refinedev/core";
import { HeadlessInferencer } from "@refinedev/inferencer/headless";
import routerBindings, {
    NavigateToResource,
    UnsavedChangesNotifier,
} from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Route, Routes } from "react-router-dom";

const App: React.FC = () => {
    return (
        <BrowserRouter>
            <Refine
                dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
                routerProvider={routerBindings}
                resources={[
                    {
                        name: "blog_posts",
                        list: "/blog-posts",
                        show: "/blog-posts/show/:id",
                        create: "/blog-posts/create",
                        edit: "/blog-posts/edit/:id",
                    },
                ]}
                options={{
                    syncWithLocation: true,
                    warnWhenUnsavedChanges: true,
                }}
            >
                <Routes>
                    <Route
                        index
                        element={<NavigateToResource resource="blog_posts" />}
                    />

                    <Route path="blog-posts">
                        <Route index element={<HeadlessInferencer />} />
                        <Route
                            path="show/:id"
                            element={<HeadlessInferencer />}
                        />
                        <Route
                            path="edit/:id"
                            element={<HeadlessInferencer />}
                        />
                        <Route path="create" element={<HeadlessInferencer />} />
                    </Route>

                    <Route path="*" element={<div>Error!</div>} />
                </Routes>
                <UnsavedChangesNotifier />
            </Refine>
        </BrowserRouter>
    );
};

export default App;

For more information about router usage, refer to the React Router Documentation.

Defining actions for a resource​

A resource can perform actions such as list, show, edit, create, delete and clone. All of these actions, except delete, are defined in the properties of the resource object.

The simplest way to define the actions is to provide the path of the page. For example, if we want to define the list action of the blog_posts resource, we can do it like this:

{
    name: "blog_posts",
    list: "/blog-posts",
}

Paths can include parameters with a convention similar :paramName. For example, if we want to define the show action of the blog_posts resource:

{
    name: "blog_posts",
    show: "/blog-posts/show/:id",
}

Additional parameters can also be defined in the path. For example, if we want to define the edit action of the blog_posts resource:

{
    name: "blog_posts",
    edit: "/blog-posts/edit/:id/:version",
}

These additional parameters, except for the id parameter, can be passed to the components or hooks using meta properties. The existing parameters in the URL will be used by default when handling the navigation.

For example, let’s say that we have a create action for the blog_posts resource as /:userId/blog-posts/create and the user is currently on the /:userId/blog-posts page.

When the user clicks on the create button, they will be redirected to /:userId/blog-posts/create because the userId parameter has been inferred from the current path.

To learn more about resource, refer to its section in the API reference documentation