CatchBoundary - no way to reset when an error is thrown in a queryFn

[tomerzcod7]

When using router & query together, I can't seem to find a good way to reset the CatchBoundary when a queryFn that is rendered in a children is rerendering/refetching, etc.

There's a guide on how to do this with react-error-boundary - https://tanstack.com/query/latest/docs/framework/react/reference/QueryErrorResetBoundary

CatchBoundary doesn't have a method to reset imperatively, only the getResetKey.

Am I missing something here? Should I not be using CatchBoundary for this?

Code example:

const { sidebar  } = route.useSearch();
const { titleKey, component, invalidateKey } = sidebarSearchMap[sidebar];

<CatchBoundary
	errorComponent={({ reset }) => (
	   <div className="flex flex-col gap-4">
		    Error loading {t(titleKey).toLowerCase()}
		    <Button
		      onClick={() => {
		        reset();
		        queryClient.refetchQueries({
		          queryKey: invalidateKey,
		          exact: false,
		        });
		      }}
		      variant="destructive"
		      className="w-fit"
		    >
		      Reload
		    </Button>
		  </div>
	)}
	getResetKey={() => sidebar}
>
	<React.Suspense
	 	 fallback={<LoaderCircle className="size-8 animate-spin" />}
	>
		 {component}
	</React.Suspense>
</CatchBoundary>

{component} is dynamically rendered based on the sidebar query string

The solution here is not good enough because the CatchBoundary won't reset if the query refetches not by the user clicking the Reload button

[TkDodo]

I don’t think you need your own CatchBoundary, see:

https://tanstack.com/router/latest/docs/framework/react/guide/external-data-loading#error-handling-with-tanstack-query

[tomerzcod7]

@TkDodo Thanks for the reply! What if I want to have an ErrorComponent wrapping only a part of the route tree and not the entire route? Doesn't this mean I need either CatchBoundary/ErrorBoundary?