Call useCustom on click

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

function MyComponent() {
  const apiUrl = useApiUrl();  

  const handleClick = () => {
    const { data, isLoading } = useCustom({
      url: `${apiUrl}/posts-unique-check`,  
      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";  
import { useState } from 'react';

function MyComponent() {
  const apiUrl = useApiUrl();  
  const [buttonClicked, setButtonClicked] = useState(false);

  const { data, isLoading } = useCustom({
    url: `${apiUrl}/posts-unique-check`,  
    method: "get",  
    config: {  
      headers: {  
        "x-custom-header": "foo-bar",  
      },  
      query: {  
        title: "Foo bar",  
      },  
    },  
  }, buttonClicked);  

  const handleClick = () => {
    setButtonClicked(true);
  }

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

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

function MyComponent() {
  const apiUrl = useApiUrl();  
  const [buttonClicked, setButtonClicked] = useState(false);
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const { mutate } = useCustom({
    url: `${apiUrl}/posts-unique-check`,  
    method: "get",  
    config: {  
      headers: {  
        "x-custom-header": "foo-bar",  
      },  
      query: {  
        title: "Foo bar",  
      },  
    },
  });  

  const handleClick = async () => {
    setIsLoading(true);
    const response = await mutate();
    setData(response);
    setIsLoading(false);
  }

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

import { useCustomMutation, useApiUrl } from "@refinedev/core";  
import { useState } from 'react';

function MyComponent() {
  const apiUrl = useApiUrl();  
  const [buttonClicked, setButtonClicked] = useState(false);

  const { mutate } = useCustomMutation();

  const handleClick = () => {
    mutate({  
      url: `${apiUrl}/categories`,  
      method: "post",  
      values: {  
        title: "New Category",  
      },  
    });
    setButtonClicked(true);
  }

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