useApi hook with params - reactjs

Question

I'm trying to use the hook useAPI that was describe in the first answer in useApi hook with multiple parameters
But I have a main problem. In my component I render the useAPI when in the url itself I have paramenters that might not have a value yet, which cause an error. The values comes from a different API call. How can I render my useAPI hook with the params only when they are defined?
my code looks like this:
const Availability = () => {
[account, setAccount] = useState(0);
const savedApiData = useAPI({
endpoint:'/programs/${state.account.id}/', // The account obj comes from a different useAPI in this component
requestType: 'POST',
body: {
siteIds: !state.siteId ? [] : [state.siteId]
}
});
}
On the first render the API url will be an error that says "cannot read property "id" of undefined".

Answer 1

This is really simple, in the fourth line, you're accessing the id property of state.account, but account here is undefined (probably because it doesn't exist). To solve the problem, you could use a dummy id when state.account is undefined (but you will definitely end up with a 404 from the server, so you must handle that), or don't use useApi at all. Hooks are really hard to tinker with, and sometimes a small unhandled use case for a hook can make it completely useless.
Another idea could be to allow the endpoint hook config parameter to be a function (only invoked when requesting), and add another boolean parameter to this object to control wether or not the request should be done.
Then, if state.account is undefined, no request is done, the endpoint function is never executed and no error occur, and when state.account has a value, the hook could re-try to launch the request, call the endpoint function and this time you get no error.
Example (not tested):
const useApi = ({endpoint, requestType, body, doRequest = true}) => {
const [data, setData] = useState({ fetchedData: [], isError: false, isFetchingData: false });
useEffect(() => {
if (doRequest) requestApi();
}, [endpoint, doRequest]); // Retry request when doRequest's value changes
const requestApi = async () => {
// invoke endpoint if it is a function
let endpointUrl = typeof endpoint === 'function' ? endpoint() : endpoint;
let response = {};
try {
setData({ ...data, isFetchingData: true });
console.log(endpointUrl);
switch (requestType) {
case 'GET':
return (response = await axios.get(endpointUrl));
case 'POST':
return (response = await axios.post(endpointUrl, body));
case 'DELETE':
return (response = await axios.delete(endpointUrl));
case 'UPDATE':
return (response = await axios.put(endpointUrl, body));
case 'PATCH':
return (response = await axios.patch(endpointUrl, body));
default:
return (response = await axios.get(endpoint));
}
} catch (e) {
console.error(e);
setData({ ...data, isError: true });
} finally {
if (response.data) {
setData({ ...data, isFetchingData: false, fetchedData: response.data.mainData });
}
}
};
return data;
};
Usage:
const Availability = () => {
[account, setAccount] = useState(0);
const savedApiData = useAPI({
endpoint: () => '/programs/${state.account.id}/', // Replace string literal with a factory function
requestType: 'POST',
body: {
siteIds: !state.siteId ? [] : [state.siteId]
},
doRequest: !!state.account, // Only request if account exists
});
}