While working with React hooks, I encountered an issue where code execution would inexplicably stop when reaching the await keyword within an async function. The await call is surrounded by a try...catch...finally block. Here's a simplified version of the code:
const useCustomHook = () = {
const searchMutation = useSearchMutation();
const onSearch = async (searchParams: ISearchParams) => {
try {
// some code
const resposnse = await searchMutation({params});
// handling results
} catch (error) {
// some code
} finally {
// some code
}
}
return { onSearch };
}
The SearchMutation hook utilizes react-query for making requests:
const mutatePromise = async (variables: Variables, options?: IMutationOptions<Data, Error, Variables>) => {
return new Promise<Data>((resolve, reject) => {
result.mutate(variables, {
...options,
onSuccess: data => {
resolve(data);
},
onError: error => {
reject(error);
},
});
});
};
A call to result.mutate triggers a custom mutation function:
const result = _useMutation<Data, Error, Variables>({
mutationKey: url,
mutationFn: async variables => {
// code for fetching and processing response
},
...options,
});
In certain scenarios, particularly when multiple calls are made rapidly, the onSuccess function resolves with undefined which causes the onSearch function's code execution to halt after the searchMutation await call.
This unexpected behavior raises questions about how resolving a promise with undefined could halt further code execution without throwing any errors. Any insights on debugging such an issue?