Better single fetch support for explicit loader/action return types

[aaronadamsCA]

We always define explicit return types, and single fetch is making this a bit tougher than it needs to be on our loaders and actions.

With json() deprecated in v2.14.0, we're updating our remaining actions to return plain objects where possible, and data() where necessary.

Unfortunately this means TypedResponse is out, and since DataWithResponseInit has not stabilized and is not re-exported by the Remix server runtime packages, for now we have to make it ourselves:

type DataWithResponseInit<T> = ReturnType<typeof data<T>>;

An official solution would be great.

Just re-exporting DataWithResponseInit would be fine, but even better would be something like SerializeTo<T> (as a counterpart to SerializeFrom<T>) that works whether you return a POJO or data().

[rbrcurtis]

deprecating json() and not exporting DataWithResponseInit means that I can't easily upgrade remix because I have to do a manual update to several hundred files instead of being able to search and replace.

[prescottprue]

Agreed this is making it so updating to data (in the case of having a status to set) is breaking types pulled from useActionData or useFetcher().data even if you follow the example in the react-router docs about form validation exactly (it seems like @ryanflorence is the author of this doc)

i.e.

export async function action({
  request,
}: Route.ActionArgs) {
  const formData = await request.formData();
  const email = String(formData.get("email"));
  const password = String(formData.get("password"));

  const errors = {};

  if (!email.includes("@")) {
    errors.email = "Invalid email address";
  }

  if (password.length < 12) {
    errors.password =
      "Password should be at least 12 characters";
  }

  if (Object.keys(errors).length > 0) {
    return data({ errors }, { status: 400 });
  }

  // Redirect to dashboard if validation is successful
  return redirect("/dashboard");
}

export default function Signup(_: Route.ComponentProps) {
  let fetcher = useFetcher();
  let errors = fetcher.data?.errors; // This is typed as any
  return (
    <fetcher.Form method="post">
      <p>
        <input type="email" name="email" />
        {errors?.email ? <em>{errors.email}</em> : null}
      </p>

      <p>
        <input type="password" name="password" />
        {errors?.password ? (
          <em>{errors.password}</em>
        ) : null}
      </p>

      <button type="submit">Sign Up</button>
    </fetcher.Form>
  );
}

If you do ^ with json instead of data things work as expected

[c-arnaud]

Please try adding "@remix-run/router": "1.23.0" to your package.json.

[aaronadamsCA]

Yeah, I see that now I could import UNSAFE_DataWithResponseInit from "@remix-run/router".

Do you know what currently makes this unsafe as compared to TypedResponse?

[mbrowne]

I'm not sure if this will help your case, but you could use the optional type argument for the data function, e.g.:

return data<MyActionData>({ ... }, { headers: ... })

[aaronadamsCA]

React Router now exports this type, which works for us!

import type { UNSAFE_DataWithResponseInit } from "react-router";