How to make that was only one function fetchData? - reactjs

Question

I have a function apiFunction inside the useEffect, which make request to the server:
useEffect(() => {
async function fetchData(currentPage, searchInput ) {
try {
const res = await apiFunction ('api/categories', { method: 'GET'}, currentPage, searchInput);
setValue(prev => ({
...prev,
listCategory: res.data,
currentPage: res.page,
buttonsPagination: Math.ceil(res.total / res.perPage)
}));
} catch (e) {
console.error(e);
}
}
fetchData(value.currentPage, value.searchInput);
}, [value.currentPage, value.searchInput]);
Function apiFunction is in a separate file and looks like this:
export const apiFunction = async (url, args, valuePage) => {
const response = await fetch(`${apiUrl}${url}?page=${valuePage}&q=${valueFilter}`, {
...args,
headers: {
"Content-type": "application/json; charset=UTF-8 ",
"Accept": 'application/json',
...args.headers,
},
});
return response.json();
}
This function was created simply for convenience. But now I dont need this function. I need that code from apiFunction was inside function fetchData. That is, that the function apiFunctiondid not exist at all.
How to implement it?

Answer 1

You can simply replace the apiFunction with fetch call in your component like below
useEffect(() => {
async function fetchData(currentPage, searchInput) {
try {
const resJson = await fetch(`${apiUrl}api/categories?page=${currentPage}`, {
method: 'GET'
headers: {
"Content-type": "application/json; charset=UTF-8 ",
Accept: "application/json",
}
});
const res = await resJson.json();
setValue(prev => ({
...prev,
listCategory: res.data,
currentPage: res.page,
buttonsPagination: Math.ceil(res.total / res.perPage)
}));
} catch (e) {
console.error(e);
}
}
fetchData(value.currentPage, value.searchInput);
}, [value.currentPage, value.searchInput]);