Need sample of useCustom hook

import { useCustom, useApiUrl } from "@refinedev/core";  
  
interface PostUniqueCheckResponse {  
 isAvailable: boolean;  
}  
  
const apiUrl = useApiUrl();  
  
const { data, isLoading } = useCustom<PostUniqueCheckResponse>({  
 url: `${apiUrl}/posts-unique-check`,  
 method: "get",  
 config: {  
 headers: {  
 "x-custom-header": "foo-bar",  
 },  
 query: {  
 title: "Foo bar",  
 },  
 },  
});  

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

interface PostUniqueCheckResponse {  
 isAvailable: boolean;  
}  

const apiUrl = useApiUrl();  

const Component = () => {
  const { data, isLoading, refetch } = useCustom<PostUniqueCheckResponse>({  
    url: `${apiUrl}/posts-unique-check`,  
    method: "get",  
    config: {  
      headers: {  
        "x-custom-header": "foo-bar",  
      },  
      query: {  
        title: "Foo bar",  
      },  
    },
    queryOptions: {
      enabled: false,
    },
  });  

  const handleClick = () => {
    refetch();
  };

  return (
    <Button onClick={handleClick}>Fetch Data</Button>
  );
};

import { useCustom, useApiUrl } from "@refinedev/core";  
import { Button, Form, Input } from "antd";

interface PostUniqueCheckResponse {  
 isAvailable: boolean;  
}  

const apiUrl = useApiUrl();  

const Component = () => {
  const { data, isLoading, refetch } = useCustom<PostUniqueCheckResponse>({  
    url: `${apiUrl}/posts-unique-check`,  
    method: "get",  
    config: {  
      headers: {  
        "x-custom-header": "foo-bar",  
      },  
      query: {  
        title: "Foo bar",  
      },  
    },
    queryOptions: {
      enabled: false,
    },
  });  

  const handleSubmit = (values) => {
    refetch({
      url: `${apiUrl}/posts-unique-check`,
      method: "post",
      config: {
        body: JSON.stringify(values),
      },
    });
  };

  return (
    <Form onFinish={handleSubmit}>
      <Form.Item name="title">
        <Input placeholder="Title" />
      </Form.Item>
      <Button type="primary" htmlType="submit">Submit</Button>
    </Form>
  );
};

import { useMutation } from "@refinedev/core";  
import { Button, Form, Input } from "antd";

const Component = () => {
  const { mutate } = useMutation();

  const handleSubmit = (values) => {
    mutate({
      resource: "posts",
      type: "create",
      variables: {
        data: values,
      },
    });
  };

  return (
    <Form onFinish={handleSubmit}>
      <Form.Item name="title">
        <Input placeholder="Title" />
      </Form.Item>
      <Button type="primary" htmlType="submit">Submit</Button>
    </Form>
  );
};

import { useCustomMutation, useApiUrl } from "@refinedev/core";  
import { Button, Form, Input } from "antd";

interface ICategory {  
 id: number;  
 title: string;  
}  

const apiUrl = useApiUrl();  

const Component = () => {
  const { mutate } = useCustomMutation<ICategory>();  

  const handleSubmit = (values) => {
    mutate({  
      url: `${apiUrl}/categories`,  
      method: "post",  
      values: values,  
    });  
  };

  return (
    <Form onFinish={handleSubmit}>
      <Form.Item name="title">
        <Input placeholder="Title" />
      </Form.Item>
      <Button type="primary" htmlType="submit">Submit</Button>
    </Form>
  );
};

import axios, { AxiosRequestConfig } from "axios";
import { HttpError } from "@refinedev/core";

const axiosInstance = axios.create({
  baseURL: "<http://127.0.0.1:5000/api",>
});

axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    const customError: HttpError = {
      ...error,
      message: error.response?.data?.message,
      statusCode: error.response?.status,
    };

    return Promise.reject(customError);
  }
);

export { axiosInstance };

import axios from "axios";  
import { DataProvider, HttpError, useNotification } from "@refinedev/core";  

// Error handling with axios interceptors  
const axiosInstance = axios.create();  

const { notify } = useNotification();

axiosInstance.interceptors.response.use(  
 (response) => {  
 return response;  
 },  
 (error) => {  
 const customError: HttpError = {  
 ...error,  
 message: error.response?.data?.message,  
 statusCode: error.response?.status,  
 };  

 notify({
    type: "error",
    message: customError.message,
 });

 return Promise.reject(customError);  
 },  
);  

import { useCustomMutation } from "@refinedev/core";
import { Form, Input, Button } from "antd";

const Component = () => {
  const { mutate } = useCustomMutation();
  const [form] = Form.useForm();

  const handleSubmit = (values) => {
    mutate({
      url: "/your-endpoint",
      method: "post",
      values: values,
    }).catch((error) => {
      // Assuming error.response.data is an object like { fieldName: "Error message" }
      const fieldErrors = Object.entries(error.response.data).map(([name, errors]) => ({
        name,
        errors: Array.isArray(errors) ? errors : [errors],
      }));

      form.setFields(fieldErrors);
    });
  };

  return (
    <Form form={form} onFinish={handleSubmit}>
      <Form.Item name="fieldName">
        <Input placeholder="Field Name" />
      </Form.Item>
      <Button type="primary" htmlType="submit">Submit</Button>
    </Form>
  );
};