Reusing FormData between clientAction and action

[bobbysciacchitano]

Hello,

I am using Firebase for my auth / user management and have a scenario when a user may choose to change their password which can be browser or server side (I've chosen server side).

Sometimes, Firebase will require the user to sign in again. The sign in method is browser only.

When I try to unpack the request.formData twice (once in clientAction and again in action) I get the following error:

Failed to execute 'text' on 'Request': body stream already read

My naive view is that I should be able to access formData at least once in each action. Is there a pattern for being able to do this?

import { ActionFunctionArgs } from "@remix-run/node";
import {
  ClientActionFunctionArgs,
  Form,
  useActionData,
} from "@remix-run/react";

export async function action({ request }: ActionFunctionArgs) {
  console.log("Hi from server action");

  const formData = await request.formData();

  const intent = String(formData.get("_intent"));

  console.log(intent);

  // do something ... if sign in required show dialog ...
  return { isSignInRequired: true };
}

export async function clientAction({
  request,
  serverAction,
}: ClientActionFunctionArgs) {
  console.log("Hi from client action");

  const formData = await request.formData();

  const intent = String(formData.get("_intent"));

  console.log(intent);

  if (intent === "sign-in") {
    // ... do firebase sign in ...
    return {};
  }

  const data = await serverAction();

  return data;
}

export default function Route() {
  const state = useActionData();

  if (state?.isSignInRequired) {
    return (
      <Form method="post">
        <p>Sign In Dialog</p>

        <p>
          <button type="submit" name="_intent" value="sign-in">
            Sign In
          </button>
        </p>
      </Form>
    );
  }

  return (
    <>
      <Form method="post">
        <p>Change Password Form</p>

        <p>
          <button type="submit">Change Password</button>
        </p>
      </Form>
    </>
  );
}

[kiliman]

I think that when Remix calls your serverAction, it's also processing the request again, so that's why you get the error.

Try using await request.clone().formData()

This clones the request in the clientLoader so you won't get the error.

https://developer.mozilla.org/en-US/docs/Web/API/Request/clone

[bobbysciacchitano]

Cool! Seems like a happy medium. Thanks for the suggestion.

[kennygoff]

Not sure if this is expected but it wasn't obvious to me... Just in case anyone stumbles on this and runs into the same thing I did, the order seems to matter here and trying to clone within the server action doesn't work:

export async function action({ request }: Route.LoaderArgs) {
  const formData = await request.formData();
  // ...
}

export async function clientAction({
  request,
  serverAction,
}: Route.ClientActionArgs) {
  const formData = await request.clone().formData();
  const serverData = await serverAction();
  // ...
}

This will fail, even though the clone in server action happens "first":

export async function action({ request }: Route.LoaderArgs) {
  const formData = await request.clone().formData();
  // ...
}

export async function clientAction({
  request,
  serverAction,
}: Route.ClientActionArgs) {
  // Running the clone in serverAction before the clientAction will fail!
  const serverData = await serverAction();
  const formData = await request.formData();
  // ...
}

[gustavopch]

I guess calling serverAction() consumes the formData still on the client (and the instance on the server is not the same, just a reconstruction).

[sergiodxa]

The Request received by the clientAction is the same sent to the serverAction, that's why the body needs to be cloned, but since serverAction doesn't clone the body if you try to read it after calling serverAction it will fail because the body was already used, if you clone the request first and read the FormData later it should also work.

export async function clientAction({
  request,
  serverAction,
}: Route.ClientActionArgs) {
  const cloned = request.clone(); // clone the request here
  const serverData = await serverAction();
  const formData = await cloned.formData(); // read the body here
  // ...
}