Page in Refine

Does every page in refine should be linked to a resource?

8 Replies

Hi @yohan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, pages are typically linked to resources, which represent entities in an API's endpoint. The resources prop is a fundamental building block of a Refine app, serving as a bridge between the data from the API and the pages in the app. This allows pages to interact with the data from the API. Each resource in the resources prop can have CRUD actions (list, create, edit, show, and delete) associated with it. These actions are represented as pages in the application. For example, the list action corresponds to a page that lists multiple items of a resource, the create action corresponds to a page that allows creating a new item of a resource, and so on. Here's an example of how resources are defined in a Refine app:

<Refine  
 dataProvider={dataProvider("<https://api.example.com">)}  
 resources={[  
 {  
 name: "posts",  
 list: "/posts", // The list page of this resource will be available at /posts in your app  
 create: "/posts/create", // The create page of this resource will be available at /posts/create in your app  
 edit: "/posts/edit/:id", // The edit page of this resource will be available at /posts/edit/:id in your app  
 show: "/posts/show/:id", // The show page of this resource will be available at /posts/show/:id in your app  
 },  
 ]}  
 />

<Refine  
 dataProvider={dataProvider("<https://api.example.com">)}  
 resources={[  
 {  
 name: "posts",  
 list: "/posts", // The list page of this resource will be available at /posts in your app  
 create: "/posts/create", // The create page of this resource will be available at /posts/create in your app  
 edit: "/posts/edit/:id", // The edit page of this resource will be available at /posts/edit/:id in your app  
 show: "/posts/show/:id", // The show page of this resource will be available at /posts/show/:id in your app  
 },  
 ]}  
 />

In this example, each action of the posts resource is associated with a specific route in the app, and each route corresponds to a specific page. However, it's important to note that not every page in a Refine app has to be linked to a resource. You can create custom pages that are not linked to any resource. These pages can be used for various purposes, such as displaying custom content, forms, or any other functionality that doesn't directly interact with the API data. For more information, you can refer to the Refine documentation (https://refine.dev/docs/core/refine-component#resources) and blog posts (https://refine.dev/blog/refine-react-invoice-generator-3#page-views-in-refine) on resources and pages. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below

notable-maroon•6mo ago

@kapa.ai do you have sample for custom pages?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, Refine provides examples for creating custom pages. You can create a new page in Refine using the built-in command create-resource. Here's an example of how to create a new page that lists the content:

npm run refine create-resource products -- --actions list

npm run refine create-resource products -- --actions list

This command will create a new folder pages in your project file tree, and inside it, there will be a route-specific folder products that includes files index.ts and list.tsx. The list.tsx file will contain a component that uses the AntdInferencer from Refine to automatically design the views for resources based on the data structure:

import { IResourceComponentsProps, GetListResponse } from "@pankod/refine-core";  
import { AntdInferencer } from "@pankod/refine-inferencer/antd";  
  
export const ProductsList: React.FC<IResourceComponentsProps<GetListResponse<{}>>> = () => {  
 return <AntdInferencer />;  
};

import { IResourceComponentsProps, GetListResponse } from "@pankod/refine-core";  
import { AntdInferencer } from "@pankod/refine-inferencer/antd";  
  
export const ProductsList: React.FC<IResourceComponentsProps<GetListResponse<{}>>> = () => {  
 return <AntdInferencer />;  
};

The newly created list page will be automatically imported and passed in as resource prop in the Refine component in App.tsx:

<Refine  
 dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}  
 notificationProvider={notificationProvider}  
 Layout={Layout}  
 ReadyPage={ReadyPage}  
 catchAll={<ErrorComponent />}  
 routerProvider={routerProvider}  
 authProvider={authProvider}  
 LoginPage={Login}  
 resources={[  
 {  
 name: "products",  
 list: ProductsList,  
 },  
 ]}  
/>

<Refine  
 dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}  
 notificationProvider={notificationProvider}  
 Layout={Layout}  
 ReadyPage={ReadyPage}  
 catchAll={<ErrorComponent />}  
 routerProvider={routerProvider}  
 authProvider={authProvider}  
 LoginPage={Login}  
 resources={[  
 {  
 name: "products",  
 list: ProductsList,  
 },  
 ]}  
/>

You can then navigate to localhost:3000/products (http://localhost:3000/products) to see the new page that lists data from the /products route from the refine's built-in data provider. For more examples of custom pages, you can check out the examples section (https://refine.dev/docs/examples/) in the Refine documentation. Source: Refine vs Blitz.js Blog Post (https://refine.dev/blog/react-admin-frameworks-refine-vs-blitz-js#refine-5) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below

notable-maroon•6mo ago

do you have sample how to use custom method on data provider? @kapa.ai do you have sample how to use custom method on data provider?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, Refine allows you to define and use custom methods in your data provider. Here's an example of how to define a custom method and use it in your application: First, you define the custom method in your data provider:

import simpleRestDataProvider from "@refinedev/simple-rest";

const dataProvider = {
  ...simpleRestDataProvider("<https://my.api.com">),
  customMethods: {
    myCustomMethod: ({ params, meta }) => ({
      data: {},
    }),
  },
};

import simpleRestDataProvider from "@refinedev/simple-rest";

const dataProvider = {
  ...simpleRestDataProvider("<https://my.api.com">),
  customMethods: {
    myCustomMethod: ({ params, meta }) => ({
      data: {},
    }),
  },
};

In this example, a custom method named myCustomMethod is added to the data provider. This method takes two parameters: params and meta. Then, you can use the useCustomMethod hook to call this custom method in your components:

const { mutate } = useCustomMethod("myCustomMethod", { as: "mutation" });
const { data, isLoading } = useCustomMethod("myCustomMethod", { as: "query" });
const { data, isLoading } = useCustomMethod("myCustomMethod");

const { mutate } = useCustomMethod("myCustomMethod", { as: "mutation" });
const { data, isLoading } = useCustomMethod("myCustomMethod", { as: "query" });
const { data, isLoading } = useCustomMethod("myCustomMethod");

In this example, the useCustomMethod hook is used to call the myCustomMethod custom method. The as option is used to specify whether the custom method should be used as a mutation or a query. Please note that this feature is part of a pull request (https://github.com/refinedev/refine/pull/5457) and may not be available in the current stable version of Refine. Be sure to check the status of the pull request and the version of Refine you're using. For more information on how to use data providers in Refine, you can refer to the Data Provider documentation (https://refine.dev/docs/data/data-provider). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below