Infer Type in ActionData

[wicked agate]

i ain't sure, since im using remix typedjson, but you can do SerializeFrom<typeof action> i believe

[novel kayak]

useActionData<typeof action>()

[turbid cairn]

I already did that and it it still complaining.

Probably because I assigned a type/interface on the useToastNotification. So I’m not sure how to fix it.

[novel kayak]

it still complaining.

explain?

The | means OR, so your action could return multiple different things and you need to make sure it's returning the data your toast hook expects

The easiest way is to keep a consistent return type across all of them

return json({
  result: submission.reply(),
  toast: null
})

and

return json({
  result: null 
  toast: { title, description, error },
})

then you'd give the result to conform lastResult: actionData?.result

and you can filter your useEfffect

useEffect(() => {
  if (actionData.toast) {
    showToast(actionData)
  }
}, [actionData, showToast])

[turbid cairn]

Thank you. That make sense.

Having another error right now.

Argument of type 'JsonifyObject<{ title: string; message: string; type: string; }> | null | undefined' is not assignable to parameter of type 'UseToastNotificationProps'.
Type 'undefined' is not assignable to type 'UseToastNotificationProps'.

It's because of the JsonifyObject , I thought using useActionData<typeof action>(); would remove that?

[novel kayak]

it's not because of JsonifyObject, that's a typescript function that serializes argument types

you have resultYouWant | null | undefined

so before you pass it to useToastNavigation you need to make sure it's not going to be null or undefined

or you can allow useToastNavigation to accept null and undefined args

and handle those cases inside it

[turbid cairn]

What would you choose in your opinion? How would you handle it?

[novel kayak]

toast is going to be null in one of these two normal scenarios, so I'd let the useToastNavigation hook accept null values

it thinks your type could be any string

in your action, when you set the type, use type: "error" as const

or you can make string union type

type IconType = "error" | "success"

type: "error" as IconType

and then you can set your UseToastNotificationProps to look for IconType

[turbid cairn]

That works! Appreciate it! Thank you @novel kayak