Trigger useCustom on click

Is there any way to trigger an useCustom on click on a button ?

2 Replies

kapa.ai•13mo ago

Hi @realdragonma. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can trigger the useCustom hook on a button click in your React component. You would need to set up a function that runs when the button is clicked, and within that function, you can call the useCustom hook. Here's a basic example of how you might set this up:

import { useCustom, useApiUrl } from "@refinedev/core";  

const YourComponent = () => {
  const apiUrl = useApiUrl();  

  const handleClick = () => {
    const { data, isLoading } = useCustom({
      url: `${apiUrl}/your-endpoint`,  
      method: "get",  
      config: {  
        headers: {  
          "x-custom-header": "foo-bar",  
        },  
        query: {  
          title: "Foo bar",  
        },  
      },  
    });  
  }

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

import { useCustom, useApiUrl } from "@refinedev/core";  

const YourComponent = () => {
  const apiUrl = useApiUrl();  

  const handleClick = () => {
    const { data, isLoading } = useCustom({
      url: `${apiUrl}/your-endpoint`,  
      method: "get",  
      config: {  
        headers: {  
          "x-custom-header": "foo-bar",  
        },  
        query: {  
          title: "Foo bar",  
        },  
      },  
    });  
  }

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

In this example, when the button is clicked, it triggers the handleClick function, which in turn triggers the useCustom hook. The useCustom hook sends a GET request to the specified URL, with the specified headers and query parameters. Please note that this is a simplified example and you might need to adjust it according to your needs. For more detailed information, you can refer to the useCustom documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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