T
TanStack•3mo ago
judicial-coral

Fix TanstackFrom after migration from `Router` to `Start`

Hey! I updated my app to use Start instead of router, but my forms work anymore. Before I would post to my Hono backend (different port) using orpc, I expect the same to happen right now 
function RouteComponent() {
  const navigate = useNavigate({from: "/login"});

  const sendMagicLinkMutation = useMutation(
    orpc.auth.sendMagicLink.mutationOptions({
      onSuccess: () => {
        navigate({to: "/magic-link-sent"});
      },
      onError: (error) => {
        toast.error(error.message || "Failed to send magic link");
      },
    }),
  );

  const form = useForm({
    defaultValues: {email: ""},
    validators: {
      onSubmitAsync: ({value: {email}}) => {
        return withValidationErrors(sendMagicLinkMutation.mutateAsync({email}));
      },
      onSubmit: z.object({email: z.email("Invalid email address")}),
    },
  });

  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col items-center gap-2 text-center">
        <h1 className="text-2xl font-bold">Welcome</h1>
        <p className="text-muted-foreground text-sm text-balance">
          New here or coming back? Just enter your email to get started.
        </p>
      </div>
      <form
        onSubmit={(event) => {
          event.preventDefault();
          event.stopPropagation();
          form.handleSubmit();
        }}
      >
        {/*  */}
      </form>
    </div>
  );
}
function RouteComponent() {
  const navigate = useNavigate({from: "/login"});

  const sendMagicLinkMutation = useMutation(
    orpc.auth.sendMagicLink.mutationOptions({
      onSuccess: () => {
        navigate({to: "/magic-link-sent"});
      },
      onError: (error) => {
        toast.error(error.message || "Failed to send magic link");
      },
    }),
  );

  const form = useForm({
    defaultValues: {email: ""},
    validators: {
      onSubmitAsync: ({value: {email}}) => {
        return withValidationErrors(sendMagicLinkMutation.mutateAsync({email}));
      },
      onSubmit: z.object({email: z.email("Invalid email address")}),
    },
  });

  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col items-center gap-2 text-center">
        <h1 className="text-2xl font-bold">Welcome</h1>
        <p className="text-muted-foreground text-sm text-balance">
          New here or coming back? Just enter your email to get started.
        </p>
      </div>
      <form
        onSubmit={(event) => {
          event.preventDefault();
          event.stopPropagation();
          form.handleSubmit();
        }}
      >
        {/*  */}
      </form>
    </div>
  );
}
I might add my Tanstack Start server in between, but for now I wanted to continue with the same SPA approach. What's wrong? I get a full page reload? I thought preventDefault would stop it
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?