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:
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:
----------------------<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below
afraid-scarlet•8mo ago
@kapa.ai do you have sample for custom pages?
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:
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:
The newly created list page will be automatically imported and passed in as resource
prop in the Refine
component in App.tsx
:
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:
----------------------<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below
afraid-scarlet•8mo 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?
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:
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:
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:
----------------------<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below