Custom Page
I want to create a new page, that will use OpenStreetMaps, so this resource will no be using the normal actions as create, edit, delete etc.
I want this page to make a post request to obtain routes from my backend and render it. How do I make this post request?
16 Replies
Hi @jaoc1811. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. However, Refine does provide the ability to create custom pages and manage your own routes in your project. You can learn more about this in the Custom Pages documentation (https://refine.dev/docs/examples/customPages).
As for making a POST request, you might need to use a data fetching library like
axios
or fetch
to send a POST request to your backend. Unfortunately, the provided extracts do not contain specific information on how to make POST requests in Refine.
For more detailed guidance, you might want to check out the Refine documentation (https://refine.dev/docs) or their Github discussions (https://github.com/refinedev/refine/discussions) to see if similar questions have been asked and answered.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
stormy-gold•9mo ago
@kapa.ai If I want to make a POST request in my page, the inst any hook of refine that can't help me with that? I have to use axios by myself?
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, Refine provides a hook called
useCustom
that you can use to make custom API requests, including POST requests. This hook is part of Refine's data hooks and is used in conjunction with the custom
method in your data provider.
Here's an example of how you can use it:
In this example, replace ${apiURL}/your-endpoint
with your API endpoint and { // Your payload here }
with the data you want to send in the POST request.
You can find more information about the useCustom
hook in the Refine documentation (https://refine.dev/docs/data/hooks/use-custom/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
stormy-gold•9mo ago
for what is used useApiUrl? @kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useApiUrl
hook is used to get the base URL of the API endpoint in Refine. It uses the getApiUrl
method from the dataProvider
to retrieve the API URL.
Here's an example of how you can use it:
In this example, apiUrl
will hold the base URL of your API.
This hook is particularly useful when you want to use the API URL in your custom hooks or when you need to make requests to different endpoints that share the same base URL.
You can find more information about the useApiUrl
hook in the Refine documentation (https://refine.dev/docs/data/hooks/use-api-url).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
stormy-gold•9mo ago
how I can use that useCustom hook after pressing a button for example? @kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
To use the
useCustom
hook after pressing a button, you can use the refetch
function provided by the useCustom
hook. You can call this function in the onClick
handler of your button.
Here's an example:
In this example, the useCustom
hook will not run automatically due to the enabled: false
option. Instead, it will run when the refetch
function is called, which happens when you click the button.
You can find more information about the useCustom
hook in the Refine documentation (https://refine.dev/docs/data/hooks/use-custom/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
stormy-gold•9mo ago
Thanks! @kapa.ai I have another question. Refine is telling me that i have some updates. But I have all "wanted" versions from the table. Should I update the packages to the latest versions? One of them the simple-rest package has a red colour on it, I dont know if that means that is a breaking major version
Let me check the knowledge base for you. One moment! :books:
----------------------
Refine provides a command to check for updates in your installed packages. The command
npm run refine check-updates
shows the current, wanted, and latest versions of the installed Refine packages.
The "wanted" version is the maximum version that satisfies the version range specified in your package.json
file. The "latest" version is the most recent version of the package available.
If a package is highlighted in red, it typically indicates a major version update. Major updates often come with breaking changes, so you should review the package's release notes or changelog before updating to understand what changes are included and how they might affect your project.
While it's generally a good practice to keep your packages up-to-date, it's not always necessary to update to the latest version, especially if the current version is working well for your needs. However, updates often include bug fixes, performance improvements, and new features, so they can be beneficial.
To update your Refine packages to the wanted version, you can run the command npm run refine update
.
You can find more information about checking for updates in Refine in the Refine documentation (https://refine.dev/docs/packages/cli#check-updates).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
stormy-gold•9mo ago
@kapa.ai how can I define the data response structure with the useCustom hook?