Can't understand the new behaviour of useLoaderData

[nullndr]

I have some problems with the latest update of useLoaderData

Here is my loader:

export const loader = async () => {
  return {
    requestedDomains: [
      { domain: "example.com", status: "pending" },
      { domain: "saulgoodman.org", status: "approved" },
      { domain: "example.org", status: "rejected", reason: "Not allowed" },
    ],
  };
};

And

const { requestedDomains } = useLoaderData<typeof loader>();

requestedDomains is of type:

(SerializeObject<{
    domain: string;
    status: string;
    reason?: undefined;
}> | SerializeObject<{
    domain: string;
    status: string;
    reason: string;
}>)[]

Shouldn't it be

SerializeObject<{
    domain: string;
    status: string;
    reason?: string;
}>[]

?

This behaviour breaks my code because the type should be

{
    domain: string;
    status: string;
    reason?: string;
}[]

[kiliman]

If you want the new type inference to work, you have to do the following:

// Type your loader args
export const loader = async ({ request } : LoaderArgs) => {}

// return your values with `json` helper
return json({ requestedDomains: [{}] })

[kiliman]

Hmm... looks like Remix type inference breaks down with optional properties.

[nullndr]

@killman Should I report a bug?

[kiliman]

Yes, I don't think it's intentional. I do know they want to use an external lib for that vs home grown, so perhaps that'll be fixed in a future update. #3907 (review)

[nullndr]

Thank you

[kiliman]

In the meantime, you can checkout remix-typedjson. It will support your use case because it doesn't try to convert your type to the JSON serialized type. Instead, it will convert your JSON data back into the original type (if needed, does nothing if you don't use non-JSON types).

https://github.com/kiliman/remix-typedjson

[pcattori]

As described in this comment, the behavior you are seeing is inherent to Typescript and is not a Remix issue.