router icon indicating copy to clipboard operation
router copied to clipboard

Action promise resolves to `undefined` when action is rejected

Open Xazzzi opened this issue 3 years ago • 0 comments

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:

  1. Is there a way to hook into match invalidation? Loading the list with react-query with some non-zero staleTime will 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 like RouteOptions.onInvalidate, or maybe flag in loader to distinguish between calls from navigation and invalidating explicitly.

  2. Is there an option to disable reload on focus?

Xazzzi avatar Dec 09 '22 00:12 Xazzzi