url, method, and properties. The url property accepts the endpoint URL. The method property accepts the type of method of the endpoint (a "" endpoint in this case). The property accepts values like the for the endpoint, query parameters, and more.data property, and the loading state can be checked with the property.queryOptions to control when the query runs. Here's an example:refetch function is called to trigger the query.refetch function is called with the new configuration to trigger the query.handleSubmit function is called, which in turn calls the function with the necessary parameters to create a new post.handleSubmit function is called, which in turn calls the function with the necessary parameters to create a new category.use will be called when a request is rejected. In this function, the error is transformed into an and then rejected again.useForm hook from Ant Design. Here's an example:handleSubmit function is called, which in turn calls the function with the necessary parameters. If the mutation fails (i.e., the promise is rejected), the block is executed. In this block, the error messages are extracted from the server response and set on the corresponding fields using .useCustomuseCustomuseCustomuseCustomuseCustomuseCustomuseCustomuseCustomuseApiUrlconfigconfiggetheadersisLoadingenabledenabled: falseenabled: falseuseMutationuseMutationmutatemutatemutatemutatemutatemutateuseCustomMutationuseCustomMutationuseCustomMutationuseCustomMutationuseCustomMutationaxios.createaxiosInstance.interceptors.response.useHttpErroruseNotificationnotifynotifyonErrorcatchform.setFieldsimport { 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>
);
};