sunny-green•7mo ago

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

kapa.ai•7mo ago

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: ----------------------

kapa.ai•7mo ago

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

sunny-green•7mo 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?

kapa.ai•7mo ago

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: ----------------------

kapa.ai•7mo ago

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

sunny-green•7mo ago

for what is used useApiUrl? @kapa.ai

kapa.ai•7mo ago

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: ----------------------

kapa.ai•7mo ago

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

sunny-green•7mo ago

how I can use that useCustom hook after pressing a button for example? @kapa.ai

kapa.ai•7mo ago

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: ----------------------

kapa.ai•7mo ago

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

sunny-green•7mo 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

kapa.ai•7mo ago

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: ----------------------

kapa.ai•7mo ago

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

sunny-green•7mo ago

@kapa.ai how can I define the data response structure with the useCustom hook?

kapa.ai•7mo ago

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!