Formik: Make yupToFormErrors accepts a single ValidationError

[jgoux]

Hello,

Current Behavior

For the moment, the helper yupToFormErrors iterates on the inner array of yup's ValidationError only.

So if I construct a ValidationError manually, it's not turned into a formik error :

const error = new yup.ValidationError(
  `The user ${username} already exists`,
  username,
  'data.username'
)
yupToFormErrors(error) // it gives {}

Desired Behavior

I'd like yupToFormErrors to populate the final object with my ValidationError

Suggested Solution

/**
 * Transform Yup ValidationError to a more usable object
 */
export function yupToFormErrors<Values>(yupError: any): FormikErrors<Values> {
  let errors: any = {} as FormikErrors<Values>;

+  if (yupError.inner.length === 0) {
+    return setIn(errors, yupError.path, yupError.errors[0])
+  }

  for (let err of yupError.inner) {
    if (!errors[err.path]) {
      errors = setIn(errors, err.path, err.message);
    }
  }
  return errors;
}

Who does this impact? Who is this for?

My use case is to return Yup errors from my GraphQL resolvers so I can turn them into Formik's errors directly :

async createUser(...resolverArgs) {
      const [, { data: { username } }, { db }] = resolverArgs

      if (await db.exists.User({ username })) {
        // UserInputError is from apollo-server
        throw new UserInputError(
          'Invalid value',
          new yup.ValidationError(
            `The user ${username} already exists`,
            username,
            'data.username'
          )
        )
      }

      return forwardTo('db')(...resolverArgs)
    }
  }

[jaredpalmer]

This is above my Yup pay grade.

Cc @jquense what do you think?

[jquense]

this is how I handle it in react-formal: https://github.com/jquense/react-formal/blob/no-context/src/utils/errToJSON.js if there is no inner set it's not an aggregate error and you can safely treat it as the error itself

[martisj]

@jgoux This might be irrelevant, but we are having issues with https://github.com/jaredpalmer/formik/blob/master/src/Formik.tsx#L675
yupError.inner.length throwing undefined. As jquense posted here https://github.com/jquense/react-formal/blob/no-context/src/utils/errToJSON.js
He used just if (error.inner.length).
Does it make sense to not check for === 0 or maybe do yupError.inner.length && yupError.inner.length === 0 ?

[marpstar]

I'm seeing the exact same issue as @martisj after upgrading to 0.26 from 0.24

[felipesnts]

I'm still getting an error trying to use Yup:

TypeError: yupError.inner is undefined on the following line:

if (yupError.inner.length === 0) {

Yup v0.27.0