ErrorBoundary not working

[Slmii]

Hello,

I am trying to use ErrorBoudary within my nextjs application but it doesnt seem to work properly. All of my query functions are throwing an Error if something is wrong.

// query function
export const me = async () => {
	const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_ENDPOINT}/auth/me`, {
		headers: {
			'Content-Type': 'application/json',
			Authorization: `Bearer ${accessToken}`
		}
	});

	if (!response.ok) {
		throw new Error(...);
	}

	return await response.json();
};

// Header component
const { data } = useQuery<User, Error>(
	constants.REACT_QUERY.ME,
	() => me(),
	{
		staleTime: Infinity
	}
);

When the me function throws an error that ErrorBoundary is not catching it, instead its showing an error popup. This is the ErrorBoundary as found in the example

const { reset } = useQueryErrorResetBoundary();

<ErrorBoundary
	onReset={reset}
	fallbackRender={({ resetErrorBoundary }) => (
	<div>
		There was an error!
		<Button onClick={() => resetErrorBoundary()}>Try again</Button>
	</div>
)}
>
    {children}
</ErrorBoundary>

If I use the below component as a child of ErrorBoundary then it works

function Bomb() {
	throw new Error('💥 CABOOM 💥');
}

am I missing something?

[TkDodo]

react-query will only propagate errors to the nearest error boundary if you set the useErrorBoundary flag to true on your query:

const { data } = useQuery<User, Error>(
	constants.REACT_QUERY.ME,
	() => me(),
	{
		staleTime: Infinity,
                useErrorBoundary: true,
	}
);

because data fetching errors happen asynchronously, but React can only propagate errors to the nearest error boundary if they occur during rendering, react-query will need to catch and rethrow your error in the next render cycle. So you need to explicitly opt into this behaviour.