metropolitan-bronze

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

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;
}

// 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;
}

4 Replies

conscious-sapphire•4mo ago

yeah we dont have that yet we had quite a lenghty discussion here https://discord.com/channels/719702312431386674/1358381727864590426/1358383426595590175

metropolitan-bronzeOP•3mo ago

thanks! long conversation, but it seems that's exactly what this needs. glad you're all looking into it. @Manuel Schiller 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

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>
  );
}

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>
  );
}

conscious-sapphire•3mo ago

yeah we don't have that kind of interaction yet. we discussed this but did not find a good pattern yet see this discussion https://discord.com/channels/719702312431386674/1238170697650405547/1358381727864590426

metropolitan-bronzeOP•3mo ago

gotcha. thanks

Gaming

Programming

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

Did you find this page helpful?