Recommended alternative for json() marked deprecated in 6.28

[RoBackman]

Hi!

When using future.v7_skipActionErrorRevalidation the json() method has the nice utility of altering response status to 4xx/5xx without the need to explicitly create the response yourself (providing the ability to opt-out of revalidation in case of an error submitting some data etc.).

It also provides a convenient way to require returned data to conform to a given type.

The alternatives i see for typing is probably using "satisfies".
But with that and the revalidation opt-out i see myself recreating the json() method myself, and therefore would be interested to hear the reason why it is beeing deprecated.

[ingmarh]

In React Router v7 there is a new data utility that can be used to return custom status codes and headers in loaders/actions — see this section in the WIP v7 docs (update: linked section since removed with an update, but data still exists). I was able to use it as a replacement for json in a project using the current v7 prerelease. I’m guessing that the data utility will become the recommended alternative.

When no custom status codes or headers are needed, raw objects can be returned from loaders/actions.

[ingmarh]

There’s also Response.json which is linked in the v7.0.0 changelog as an alternative to json.

[hyusetiawan]

this does not type the useLoaderData correctly. The only way to get the data to be typed correctly it seems to straight return:

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const session = await auth.api.getSession({
    headers: request.headers
  })

  // wrapping this with Response.json or the deprecated json does not type useLoaderData correctly
  return {
    session
  }
}

const { session } = useLoaderData<typeof loader>()

[skizzo]

So how can I return a loader response without using json() but Response.json() in case I need to return custom status codes, headers, etc. which returns correctly typed data via useLoaderData()?

[tomsoderlund]

@skizzo Did you find a solution here?

[skizzo]

Nope, I have to define a type manually and use it for both the return object of my loader and useLoader() to ensure type safety.

[xeroneon]

@skizzo You are able to use "data" instead of "json", if you use "data" you will be able to pass status codes and set headers and such as if it was still "json". you will also retain all type safety as long as for the loader and action you only give types to the parameters, if you give an explicit type to the function itself or an explicit type for the return then it generally breaks the type inference

[wolfgang-hartl]

Hey there,
following up that topic. I am not really able to get typed actionData in my Page. Using an named export called action, which should return me a data object. Neither Response.json(), returning the raw object, nor using the data utility helps me get that types into my page. actionData is always of type undefined.

What am i doing wrong?

I've put together a relative simple demo example:

export async function action({ request }: Route.ActionArgs) {
  const body = await request.json();

  const resp = await AuthService.postLogin({
    body: {
      email: body.email,
      password: body.password,
    },
  });

  if (resp.response.ok) {
    throw redirect("/");
  }

  return Response.json(resp); // or returning the raw object, or using data() 
}

export default function Home({ actionData }: Route.ComponentProps) {
  const submit = useSubmit();

  return (
    <>
      <Form
        onSubmit={(data) => {
          submit(data, { method: "POST", encType: "application/json" });
        }}
      >
        <TextInput name="email" label="Email" type="email" />
        <TextInput name="password" label="Password" type="password" />

        <button type="submit">Submit</button>
      </Form>

      {actionData && <p className="text-red-500">{actionData.error.message}</p>}
    </>
  );
}

[xeroneon]

I'm running into the same issue, lsp doesn't pick up the types returned from the action

[lhbelfanti]

Hi there!

Checking this commit and reading what @ingmarh and @xeroneon said, I was able to replace the json() function with the data() function (import { data } from "@remix-run/node"). It accepts 2 parameters the custom type and the response type. The custom type can be obtained then using the useActionData hook.

Example:

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const session = await auth.api.getSession()
  const myCustomType: MyCustomType = {
    isLoggedIn: true,
    token: session.token,
  };

  return data( myCustomType, { status: 200, headers: session.headers })
}

and then using the useActionData hook:

  const actionData = useActionData<MyCustomType>();
  console.log(actionData.isLoggedIn);
  console.log(actionData.token);

I hope this helps someone who comes across the same problem and finds this thread.