R
Refine

ask-any-question

Custom Page

Aabsent-sapphire1/10/2024
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?
Kkapa.ai1/10/2024
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: ----------------------
Kkapa.ai1/10/2024
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
Aabsent-sapphire1/10/2024
@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?
Kkapa.ai1/10/2024
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:
import { useCustom, useApiUrl } from "@refinedev/core";

const { data, isLoading } = useCustom({
url: `${apiURL}/your-endpoint`,
method: "post",
config: {
payload: {
// Your payload here
},
},
});
import { useCustom, useApiUrl } from "@refinedev/core";

const { data, isLoading } = useCustom({
url: `${apiURL}/your-endpoint`,
method: "post",
config: {
payload: {
// Your payload here
},
},
});
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: ----------------------
Kkapa.ai1/10/2024
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
Aabsent-sapphire1/10/2024
for what is used useApiUrl? @kapa.ai
Kkapa.ai1/10/2024
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:
import { useApiUrl } from "@refinedev/core";

const apiUrl = useApiUrl();
import { useApiUrl } from "@refinedev/core";

const apiUrl = useApiUrl();
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: ----------------------
Kkapa.ai1/10/2024
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
Aabsent-sapphire1/10/2024
how I can use that useCustom hook after pressing a button for example? @kapa.ai
Kkapa.ai1/10/2024
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:
import { useCustom, useApiUrl } from "@refinedev/core";

const YourComponent = () => {
const apiUrl = useApiUrl();
const { data, isLoading, refetch } = useCustom({
url: `${apiUrl}/your-endpoint`,
method: "post",
config: {
payload: {
// Your payload here
},
},
queryOptions: {
enabled: false,
},
});

return (
<button onClick={() => refetch()}>Fetch Data</button>
);
};
import { useCustom, useApiUrl } from "@refinedev/core";

const YourComponent = () => {
const apiUrl = useApiUrl();
const { data, isLoading, refetch } = useCustom({
url: `${apiUrl}/your-endpoint`,
method: "post",
config: {
payload: {
// Your payload here
},
},
queryOptions: {
enabled: false,
},
});

return (
<button onClick={() => refetch()}>Fetch Data</button>
);
};
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: ----------------------
Kkapa.ai1/10/2024
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
Aabsent-sapphire1/10/2024
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
Kkapa.ai1/10/2024
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: ----------------------
Kkapa.ai1/10/2024
<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below
Aabsent-sapphire1/10/2024
@kapa.ai how can I define the data response structure with the useCustom hook?
Kkapa.ai1/10/2024
Let me check the knowledge base for you. One moment! :books: @jaoc1811 That's a great question, but unfortunately I am only capable of responding to a maximum of five questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
Hello I have a quest about updatingHello I have a quest about updating Refine. Should I update it to the wanted versions or the latest?Setting request timeout and error catching when using useDataGrid and useMany hookI am using useDataGrid hook and useMany hook in this way: const { dataGridProps} = useDataGrid(import queryClient instance from refineHello, Is it possible to import react queryClient instance from Refine directly instead of installinnot able to read the css fileimport styles from "components/header/index.mdoule.css"; using this for import and have also added auseList syncwithlocationhow to disable useList syncwithlocation?Relation table supabase api callI have a table named lot, and a table named components In lot table, I have a field name component_iAnyone that has ever tried to combineAnyone that has ever tried to combine the Refine and Payload CMS dashboard?UseTable how to implement filter search table query and paginationIam using UseTable Hook i want to implement table query, search, pagination, sortingincrease notification duration from notification providerI am using useNotificationProvider from @refine/antd. Is there a way to increase the duration of theClear the react query cacheHello, I want to clear the react query cache after signing out from the application. I tried to creaCreate Resource from another Resource in List ViewSo I basically want to integrate a button "copy" into the list-view that will route to a new form ofnextjs middlewarecan middlweare to check tokens for protected routes in next js? if yes can you helpe me out?Pass Resource directly to go / useGoIn the documentation for useGo / go ( https://refine.dev/docs/routing/hooks/use-go/#with-resource ) Refine routerHi! Is there any chance to run refine without router(or with react-router-v5) but still use InferencHow to make Form.Item component name as an array?I have component <Form.Item label="Select Stand" name={["standIds"]}> I want modify component as a HR application in refine.devHi, i am trying to find link for Refine HR / HR Application. Where can i get the codes and demo? Thahow to make select component with custom resource result keys?I have resource url: dictionaries/items It returns json: [ { "id": 1, "name": "*getting error in customtitlle handlerGetting this error in custom title handler const customTitleHandler = ({ resource, action, params }how to detect inactive user to auto logoutHow can I make auto logout or expire the session after 5 minutes of user inactivity in refine?workflow applicationHi, can i use refine.dev to create a workflow application. Is there any example that i can refer to?