Arriving at an elegant and typesafe pattern for multi-action routes

[gabimor]

I've been using remix daily for the past 1.5 years now, greatly enjoying the ideas, DX and productivity all around.
Developing in Remix for me is a quest for elegant patterns to ensure quality software, typescript and zod are a big part of the thing.

One thing i've yet to find a really elegant solution for is multi action routes, specifically:

1. having a multiple actions on a route
2. having good typing when using useActionData or fetcher.data
3. having good typing in fetcher.submission (for optimistic ui)
4. having as little boilerplate as possible with regards to reading the FormData, validating it, etc.
5. having one source of truth for actions types and have it infered (from the action function) rather than written seperately

I've tried a few patterned to get the desired result, but havn't found a nice one that feels covers all bases
@sergiodxa great remix-utils has named-actions that really comes close, but the subaction handlers are defined inside the main remix function so can't be used to typing in the components meaning in useActionData<typeof mySubActionFunc>, mySubActionFunc isn't defined.
i'm also using @kiliman's remix-params-helperand remix-typedjson and @airjp73 remix-validated-form quite a lot

I really feel like this type of scenario is at the core of any non trivial routes and Remix and the community can come up with a nice solid pattern.
My latest iteration on this is something along these lines (note: this almost works with remix-utils, just need to pass ActionArgs to the sub action handlers, a little PR and we're there):

export async function action({ request}: ActionArgs) {
  return namedAction(request, {
    saveDocument,
    deleteDocument,
    shareDocument,
    submitDocumentForReview
  })
}

async saveDocument({ request }: ActionArgs){
 // do your specific handler stuff here
}

async deleteDocument({ request }: ActionArgs){
  const parsedFormData = await getFormData(request, myZodDeleteActionSchema)
  // do something here
}

async shareDocument{ request }: ActionArgs){
  // using a remix-validated-form validation 
  const parsedFormData = await myShareDocumentValidator.validate(await request.formData())

  if (!parsedFormData.data) return validationError(parsedFormData.error) 
  
  // do something with parsedFormData.data

  // using remix-typedjson for improved typings
  return typedjson({ success: true })
}

async submitDocumentForReview({ request }: ActionArgs) {
}

function MyComponent() {

  const subActionFetcher = useFetcher<typeof mySubActionHandlerFunction>()
  subActionFetcher.data //  this will be typed with mySubActionHandlerFunction return value
  getFormData<typeof mySubActionHandlerFunction>(subActionFetcher.submission.formData) // this as well

  subActionFetcher.submit(myFormData, {method: "post", action:"/?subActionHandler"})
}

Hope this was clear enough,
I'd really love to hear your take on this, what are you using for routes with lot's of sub actions ?

[kiliman]

Nice pattern. Thanks for using my packages!

Getting types when you're going to a specific named action is fine, like your subActionFetcher. However, going to the main route and using useActionData will probably give you a union type. I haven't used the namedAction helper, so not positive.

My pattern is typically to redirect on success and only return on validation failures or throw Response on anything else. So I guess if you're using named actions and only return validation errors, then you won't need to worry too much about typing useActionData as it should always be the same type: FormError or whatever

[sergiodxa]

The namedAction function from Remix Utils should give you a TypedResponse with an union of all responses from each sub action.

I recommend you to add a property to the response so you can treat it as a discriminated union and do something like this:

let actionData = useActionData<typeof action>()

if (actionData.type === "SAVE_DOCUMENT") {
  // do something with a SAVE_DOCUMENT action response
}

// more conditions here

[theocerutti]

is this the only way to do this?

Because it's seems difficult (or UGLY) to apply condition everywhere.
Example:

  useEffect(() => {
    if (
      actionData?.type === "myaction" &&
      actionData?.success
    ) {
      // ....
    }
  }, [actionData?.success]);

[sergiodxa]

You could abstract that in an assertion function

function assertIsMyAction(actionData: unknown): asserts actionData is MyAction {
  if ("type" in actionData && actionData.type === "myAction") return
  throw new Error("Action data is not MyAction")
}

Then you can do

assertIsMyAction(actionData)
// here actionData will be typed as MyAction

And you can do Extract<SerializeFrom<typeof action>, { type: "myAction" }> to get the type of MyAction.

[theocerutti]

Sounds good! Thanks!

[redacor]

@sergiodxa What do you think of a more generic approach?

type Action<T> = T extends { intent: infer U } ? U : never;

function assertActionResult<T extends { intent: string }, U extends Action<T>>(
  result: T,
  intent: U,
): asserts result is Extract<T, { intent: U }> {
  if (result.intent !== intent) {
    throw new Error(`Expected intent ${intent}, but got ${result.intent}`);
  }
}

In an action:

return json(
  { success: false, intent, errors } as const,
  { status: 400 }
);

// Later in the same action
return json(
  { success: true, intent, data } as const
);

In a component:

assertActionResult(someActionResult, "some-intent");

// Narrow the type of the action result even further
if (!result.success) {
  // do something with errors
} else {
  // do something with data
}

[gabimor]

thank you guys for you comments and great packages!
I'll try your suggestions and will update if anything interesting comes up :)