#How to handle POST requests to component routes (non-api) and read the payload (form data, json)

9 messages · Page 1 of 1 (latest)

reef arch
#

I'm implementing an OAuth flow with Google and need a route that'll receive a POST request with the credentials payload. I have this currently working with an api route, but during payload verification some errors can throw that I want to present a nice UI for using the Error Boundaries I have for the rest of the application. I want to just have a regular route, but unsure how to access the form data from within either the loader or a server function.

In Remix/React Router, I could do this very easily like so:

// Handles the POST request from the Google OAuth callback
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  ...
  return redirect(state.redirect ?? '/', {
    headers,
  });
}

export default function GoogleSignInPage() {
  // expect a server-side redirect, but should render errors using Error Boundaries
  return null;
}
storm rain
#

yeah we dont have that yet

#

we had quite a lenghty discussion here #1358381727864590426 message

reef arch
#

thanks! long conversation, but it seems that's exactly what this needs. glad you're all looking into it.

reef arch
#

@storm rain i noticed you guys released server routes which is really cool. exciting. i'm still unsure what pattern i should follow when i expect a form submit/post to the server route (in my case done by google auth redirect during login) to possibly throw an error and have that error rendered by an error boundary. the docs at https://tanstack.com/start/latest/docs/framework/react/server-routes don't go into much detail about interactivity between server and app routes. i see an example where the app might make form submit via js, but this wouldn't cover my use-case where the submit is happening on google's domain.

#

a simpler question would be, when server and app routes are co-located, how can my app route get access to the http response from my server route regardless of the http status code? or if there's a specific pattern for error responses, that works, too

reef arch
# 
import { createFileRoute, redirect } from '@tanstack/react-router';
import { json } from '@tanstack/react-start';
import { createServerFileRoute } from '@tanstack/react-start/server';

export const ServerRoute = createServerFileRoute('/test/form').methods({
  POST: () => {
    throw json(
      { message: 'hello' },
      {
        status: 500,
      }
    );
  },
});

export const Route = createFileRoute('/test/form')({
  component: RouteComponent,
});

function RouteComponent() {
  // TODO: get POST response data?
  return (
    <div>
      <h1>Google callback</h1>
      <form method='post' action='/test/form'>
        <button type='submit'>Google</button>
      </form>
    </div>
  );
}
storm rain
#

yeah we don't have that kind of interaction yet. we discussed this but did not find a good pattern yet

#

see this discussion #start message