Send additional action data when returning validationError

[michaeldebetaz]

I am thinking about some imporvements for the design of the validationError function, which returns a 422 Response with data of type ValidatorError:

{
  "fieldErrors": {
    ....
  },
  "repopulateFields": {
    ....
  },
  "formId": ...
}

type ValidatorError = {
    subaction?: string;
    formId?: string;
    fieldErrors: FieldErrors;
};

As it is actually a wrapper for a "Bad Request" Response, it would be useful to allow sending additional actionData when the data is not valid. For example, I want to send an additional general error message with when I return a validationError, but doing so in Typescript:

return validationError({ ...result.error, formError: "General error message" });
// Object literal may only specify known properties, and 'formError' does not exist in type 'ValidatorError'

makes Typescript mad. The workaround would be to use the repopulateFields, but the name is the misleading and it forces to use an unobivous path like actionData.repopulateField.formError.

I think it would be better to add the possibility to include top-level actionData in addition to the result.error. What do you think?

Many thanks for this awesome library 👏

EDIT: As I'm playing with multiple solution, I noticed that validationError(result.error) is the same as writing json({ ...result.error, formError: "bla bla"}, { status: 422}). Am I missing something?

[airjp73]

Hi!

I'm definitely open to supporting additional parameters but not totally sure what the api would look like.

For example, I want to send an additional general error message with when I return a validationError, but doing so in Typescript:

return validationError({ ...result.error, formError: "General error message" });
// Object literal may only specify known properties, and 'formError' does not exist in type 'ValidatorError'

makes Typescript mad. The workaround would be to use the repopulateFields, but the name is the misleading and it forces to use an unobivous path like actionData.repopulateField.formError.

As a workaround, this should technically work just fine if you ignore the typescript errors.

EDIT: As I'm playing with multiple solution, I noticed that validationError(result.error) is the same as writing json({ ...result.error, formError: "bla bla"}, { status: 422}). Am I missing something?

Nope, not missing anything. validationError is basically just a convenience helper that wraps json. This is the whole implementation.

export function validationError(
  error: ValidatorError,
  repopulateFields?: unknown,
  init?: ResponseInit
): Response {
  return json<ValidationErrorResponseData>(
    {
      fieldErrors: error.fieldErrors,
      subaction: error.subaction,
      repopulateFields,
      formId: error.formId,
    },
    { status: 422, ...init }
  );
}

Edit: Worth noting though, that this also serves as encapsulation to some degree. If I renamed the fieldErrors parameter to something else I wouldn't really consider that a major-version breaking change (probably a minor version) because it's an implementation detail. I don't see myself doing that any time soon, but as a workaround I would recommend the approach that Typescript complains about, rather than using json directly.

[michaeldebetaz]

Great! Many thanks for your answers. Maybe instead of ignoring the TS error, I could simply extend the ValidationErrorResponseData interface... 🤔 Maybe the least breaking way would be to rename repopulatedFields to data or something that indicates that it could be used for more than just the fields.

EDIT : thinking about it, you would ask to rename the json action data property in the end.