Handling Zod Errors from an external API

[jolbol1]

My project:

• External API, using zod as validation - Will return ZodErrors if any.
• Front-end - Shares same zod schemas

Is there an easy way to validate the form onSubmit, ensuring if the API was to return zodErrors that I could map them to the form fields.

So far I have worked out that If I take the API response, create a new zod error on the front-end and then use the following:

export const zodIssuesToFormErrors = (issues: ZodIssue[]) =>
  defaultFormTransformer((issues: ZodIssue[]) =>
    issues.map((issue) => issue.message).join(", ")
  )(issues);

I use that code in an onSubmitAsync validator, after sending off the values to the API, and detecting a zodError from the API.

else if (res instanceof ZodError) {
        return zodIssuesToFormErrors(res.issues);
      }

I can map the zodIssues to ValidationErrors in a more automated, reusable way. Is it okay to have imported this method? and is there a recommended way to handle when an API returns zod errors. It seems to work?

Another question as well, since it seems we have to set our errors in the validators using onSubmitAsync. How could I use the data I get back from the res later if successful?

For example, if I was creating a todo:

• Submit todo form
• onSubmitAsync sends off the post request, mapping any errors that come back like a 401 etc to a form error
• If post request successful it will have the new todo ID
• now I want to redirect them to /todo/ID

Would it be okay to simply handle the navigation logic in the validator?