continuing-cyan

Getting redirected on submitting a form with TanStack start server functions.

Is this a problem on the Start side or am I doing something wrong? I was following the SSR guide on the form docs.

10 Replies

continuing-cyanOP•8mo ago

This is how I use the server function

          <form
            action={handleLogin.url}
            method="POST"
            encType="multipart/form-data"
          >

          <form
            action={handleLogin.url}
            method="POST"
            encType="multipart/form-data"
          >

Correction. This happens because of this part in the example:

  .validator((data: unknown) => {
    if (!(data instanceof FormData)) {
      throw new Error("Invalid form data");
    }
    return data;
  })
  .handler(async (ctx) => {
    try {
      const validatedData = await serverValidate(ctx.data);
      console.log("validatedData", validatedData);
      // TODO: Persist the form data to the database
    } catch (e) {
      if (e instanceof ServerValidateError) {
        // If we use e.response there is a typescript error and if we don't the user is redirected to the above page
        // return e.response;
        return e.formState;
      }

      // Some other error occurred when parsing the form
      console.error(e);
      setResponseStatus(500);
      return "There was an internal error";
    }

    return "Form has validated successfully";
  });

  .validator((data: unknown) => {
    if (!(data instanceof FormData)) {
      throw new Error("Invalid form data");
    }
    return data;
  })
  .handler(async (ctx) => {
    try {
      const validatedData = await serverValidate(ctx.data);
      console.log("validatedData", validatedData);
      // TODO: Persist the form data to the database
    } catch (e) {
      if (e instanceof ServerValidateError) {
        // If we use e.response there is a typescript error and if we don't the user is redirected to the above page
        // return e.response;
        return e.formState;
      }

      // Some other error occurred when parsing the form
      console.error(e);
      setResponseStatus(500);
      return "There was an internal error";
    }

    return "Form has validated successfully";
  });

If I return e.response instead of e.formState as the example suggests we get a cryptic typescript error Type '(name: string, value: string) => void' is not assignable to type '"Function is not serializable"'.

wise-white•8mo ago

I have the same

xenial-black•8mo ago

Same thing here I get redirected to the server functions URL when submitting the form even after following the example using form + start

wise-white•8mo ago

I really don't understand the doc example.à

exotic-emerald•8mo ago

Same, following the docs leads me to an error

continuing-cyanOP•8mo ago

We are supposed to return the e.response. Since Start is in Beta the APIs keep changing and the Forms docs haven't kept up. And to fix the typescript error I think I type-casted something to unknown. But to be honest I gave up on this pattern, I'm just submitting with javascript. Once tanstack starts has integration with react server actions like remix and next it will become easier I reckon. There definitely needs to be a proper integration between Start and Form since the logic for getting back the form state from the server with another server function seems very hacky. If next can do it with useActionState then Start can too at some point.

wise-white•8mo ago

Yes indeed its maybe too early. Lets do client side then!

continuing-cyanOP•8mo ago

Its funny the Start team are discussing how to handle this as we speak

wise-white•8mo ago

where do you see that ? @Mofo

continuing-cyanOP•8mo ago

They are discussing how to make a thing similar to "server actions" from next/remix Its in the #start channel its more of a future goal tho

Gaming

Programming

Getting redirected on submitting a form with TanStack start server functions.

Did you find this page helpful?