Why am I getting unhandled errors using useQuery?

export const getRecipe = async (id: string | undefined) => {
  if (!id) {
    throw new Error('No id provided');
  }
  const recipeId = parseInt(id);
  let { data, error, count } = await supabase
    .from('recipes')
    .select(`*`, { count: 'exact' })
    .eq('id', recipeId);
  if (error) {
    throw new Error(`${error.message}: ${error.details}`);
  }
  if (count === 0) {
    return null;
  }

  if (data) {
    const recipe: unknown = {
      ...data?.[0],
      uid: uuidv4()
    };
    return recipe as SupabaseRecipe;
  }
};

export default function useGetRecipe(id: string | undefined) {
  return useQuery({
    queryKey: ['recipe', id],
    queryFn: () => getRecipe(id),
    enabled: !!id,
    refetchOnMount: false, // when user invalidates, we don't want to refetch
    refetchOnWindowFocus: false // when user comes back to the app, we don't want to refetch
  });
}