How to access types for action methods that return multiple types

[jdmcd]

We have a v7 action method that looks something like this:

export const action = async ({ request, params }: Route.ActionArgs) => {
    if (someCondition) {
        return { error: "some error" };
    }

    return redirect('/some-url');
}

I want to use actionData in the component props like this:

export default function MyComponent({ actionData }: Route.ComponentProps) {
    // Do something with `actionData`
}

But the type of actionData doesn't optionally have the error property (presumably because the route returns two different types based on a condition).

I couldn't find anything in the docs about how to support this - what is best practice here?

[gustavopch]

Don't return the redirect, throw it instead, so it won't appear in the return type. If you still need to return objects with different structures depending on what happened in the action, use a tagged union.

[jdmcd]

@gustavopch if I throw the redirect will it redirect with an error status code? If not then yeah this seems like a great solution

[gustavopch]

It will redirect the same way as if you return, with status 301, 302, etc.

[jdmcd]

Got it - thanks!

[gustavopch]

Ah, in v7.1, redirect is automatically ignored from the inferred types.

[jdmcd]

Oh nice, that's smart