React Axios Custom Query Hook

useQuery.ts

import axios, { AxiosError, AxiosRequestHeaders } from 'axios';
import { useEffect, useState } from 'react';

import { RequestConfigI, ResponseT } from './useQuery.types';
import { instance } from 'services';

export const useQuery: RequestConfigI<ResponseT> = (
	resource,
	data,
	extraHeaders
) => {
	const [headers, setHeaders] = useState<AxiosRequestHeaders>({});
	const [error, setError] = useState<AxiosError | false>(false);
	const [loading, setLoading] = useState(true);
	const [response, setResponse] = useState({});
	const [payload, setPayload] = useState({});
	const [url, setUrl] = useState('/');

	useEffect(() => {
		const controller = new AbortController();

		if (resource) setUrl(resource);
		if (data) setPayload({ ...data });
		if (extraHeaders) setHeaders({ ...extraHeaders });

		(async () => {
			try {
				const response = await instance(url, {
					signal: controller.signal,
					data: payload,
					headers,
				});
				setResponse(response);
			} catch (error) {
				axios.isAxiosError(error) && setError(error);
			} finally {
				setLoading(false);
			}
		})();

		return () => controller.abort();
	}, [data, extraHeaders, headers, payload, resource, url]);

	return { response, loading, error };
};

useQuery.types.ts

import { AxiosError, AxiosRequestHeaders } from 'axios';

export interface RequestConfigI<ResponseType> {
	(
		resource: string,
		data?: object,
		extraHeaders?: AxiosRequestHeaders
	): ResponseType;
}

export type ResponseT = {
	response: object;
	oading: boolean;
	error: AxiosError | false;
};