Use with a Resource Route

[jamesarosen]

I have a resource route with a simple POST action:

// app/routes/newsletter.ts
export const Validator = withZod(
  z.object({ email: z.string() })
)

export async function action({ request }) {
  const fieldValues = await Validator.validate(await request.formData())
  if (fieldValues.error) {
    // here's the problem:
    return validationError(fieldValues.error)
  }
  return redirectBackOrHome()
}

validationError causes the browser to do a GET /newsletter on the assumption that it's being called from a route that has a default export. But the form for this isn't on a dedicated URL; it's in a component that's embedded in the header on every page (with reloadDocument, as required for use with resource routes).

I can do this:

  if (fieldValues.error) {
    return redirectBackOrHome()
  }

but then I lose all the error messages from remix-validated-form. I can save them off via a flash cookie, but I don't see a good way to integrate that with remix-validated-form.

Is there a good pattern for this?

[airjp73]

Hi!

I believe you can achieve this with useFetcher and the fetcher prop on the ValidatedForm.