Action promise resolves to `undefined` when action is rejected
Describe the bug
Looks like Action.submit is missing undefined in return type.
Route def:
export const ProjectsRoute = root.createRoute({
path: "/",
validateSearch: listProjectsInput,
loader: ({ search }) => loaders.listProjects.load(search),
action: async (inp: Input["createProject"]) => {
throw new Error("What if fails?"); // <--- wanted to check how errors are handled, added this
return api.createProject.mutate(inp);
},
component: ProjectsPage,
});
In component:
const projects = useMatch(ProjectsRoute.id, { strict: false });
...
<form onSubmit={(event) => projects?.action
.submit(input)
.then(project => {
// <--- Observed this callback is executed when action throws, project is undefined
projects?.navigate({ to: "/p/$id", params: { id: project?.id } });
});
}}>
Your Example Website or App
https://stackblitz.com/edit/react-ts-u6zroi?file=App.tsx
Steps to Reproduce the Bug or Issue
Example above, beta.38 reproductible
Expected behavior
I would expect .submit().then to reject, or have return type of Promise<TResponse | undefined> (notice undefined branch).
Screenshots or Videos
No response
Platform
- OS: mac Ventura
- Browser: Chrome
- Version: 107
Additional context
Bonus questions:
-
Is there a way to hook into match invalidation? Loading the list with react-query with some non-zero
staleTimewill cache result in both router and queryClient caches. Invalidate after some mutation will then kill router's, but not queryClient's cache. I was looking for something likeRouteOptions.onInvalidate, or maybe flag in loader to distinguish between calls from navigation and invalidating explicitly. -
Is there an option to disable reload on focus?