types for useActionData

[zwhitchcox]

We've all had the scenario where we an action like this:

function action() {
  if (formData.get('name').length < 4) {
    return {errors: { name: "Name is too short" } }
  }
  ...
  return json({ success: true })
}

but of course when you use this like in the following code:

const actionData = useActionData<typeof action>()
...
<input name="name" />
{actionData?.errors?.name}

you get a type error like:

Property 'name' does not exist on type {success: boolean}

So, now you have to bloat your action with:

function action() {
  if (formData.get('name').length < 4) {
    return {errors: { name: "Name is too short" }, success: false}
  }
  ...
  return json({ success: true, errors: {name: ''} })
}

or you have to manually create the type:

const actionData = useActionData<{
  success?: boolean
  errors?: {
	  name?: string
  }
}>()

...neither of these options provide a particularly great DX.

So, my solution is to make all properties optional:

import { TypedResponse } from '@remix-run/node'
import { useActionData } from '@remix-run/react'

type UntypedResponse<U> = U extends any
	? U extends TypedResponse<infer P>
		? P
		: never
	: never
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
	k: infer I,
) => void
	? I
	: never

	
type DeepPartial<T> = T extends Array<infer U>
  ? Array<DeepPartial<U>>
  : T extends object
  ? { [P in keyof T]?: DeepPartial<T[P]> }
  : T;

type OptionalAction<T extends (...args: any[]) => void> = DeepPartial<
	UnionToIntersection<UntypedResponse<Awaited<ReturnType<T>>>>
>

export function useOptionalActionData<T extends (...args: any[]) => void = any>() {
	return useActionData() as OptionalAction<T>
}

with useOptionalActionData,

{errors: {name: string}} | {success: boolean}

becomes

{errors?: {name?: string}, success?: boolean}

which is probably about what you would type out yourself.

I've just started this, so can't so it's tested very thoroughly, but it seems to work.

I wanted to post my solution, so that by Cunningham's Law someone might provide a better one.

So, I'd love to see how other people in the community have solved this. Please post below 👇🏻

[kiliman]

If you use the json helper instead of returning naked objects, Remix will infer the proper result type.

[kiliman]

You can also use remix-typedjson if you need to handle non-JSON types, like Date, BigInt, etc.

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

[zwhitchcox]

Yes, I do use json, but the problem remains.

If you have pseudocode like this:

function loader() {
  if (error) {
    return json({error: error.message})
  }
  return json({success: true})
}

the type will be {error: string} | {success: true}, whereas you want it to be {errors?: string; success?: true}, so you can use it like this:

  const data = useActionData<typeof action>()
  return <div>
    {data.error ? <div>{data.error}</div> : null}
    {data.success ? <div>Action was successful</div> : null}
  </div>

This doesn't work though. You will get a typescript error like Property 'error' does not exist on type {success:boolean}, because the property has to exist on both return types, because they are joined as union type.

What my code does is convert the union type to a combined type of all properties and makes every property optional recursively.

This allows you to infer the type without writing it out yourself (which is error prone) or having to add pointless data on your return types. In this case it would not take long to just add success to both return types and an empty error message, but the more types of data that can be returned, the more pointless data you have to add.

My solution is not ideal, but it gives you an option at least.

[kiliman]

I see, but I think you're kind of abusing TypeScript. If it were me, I would just create helper functions:

type ReturnType = {
  success: boolean
  error?: string
}
function success() : ReturnType {
  return json({ success: true })
}
function error(message: string) : ReturnType {
  return json({ success: false, error: message })
}

function loader() {
  if (error) {
    return error(error.message)
  }
  return success()
}

[a-redbourbon]

To solve this you can throw the response instead of returning it. That way useActionData only gets the inferred type from the success path

throw json({ success: false, error: e})

[nikolailehbrink]

@a-redbourbon what if you want to show an error message on the screen with useActionData like in the example? This wouldn't work for that case, I suppose.