[解決済み] 非必須項目に対するYupバリデーション

質問

私はプロジェクトでプロファイル作成フォームを持っており、私は検証のためにreact-hooks-formとyupライブラリを使用しています。

フォームには Githubユーザー名 これは任意です。しかし、私はユーザーがユーザー名を入力した場合にそれを検証したいのですが、それは2文字以上でなければなりません、そのような何か。

  const schema = yup.object().shape({
    company: yup.string().min(3).required(),
    website: yup.string(),
    location: yup.string().min(2).required(),
    skills: yup.string().min(3).required(),
    githubUsername: yup.string().min(3).nullable().notRequired(),
    bio: yup.string(),
  });

  const { register, handleSubmit, errors, touched } = useForm({
    resolver: yupResolver(schema),
  });

// フォームフィールド

        <Form.Group controlId="formBasicGusername">
          <Form.Label>Github Username</Form.Label>
          <Form.Control
            type="text"
            name="githubUsername"
            ref={register}
          />
          <span className="text-danger text-capitalize">
            {errors.githubUsername?.message}
          </span>
        </Form.Group>

これは私がこれまでに書いたスキーマですが、githubUsernameについては動作していません。空だとエラーになります。私はそれが空ではない場合にのみ検証したい。この件に関して何か手がかりはありますか？

解決方法は？

承認された答えは正しいのですが、少し情報が足りません。シェイプスキーマに周期的な依存関係を追加する必要があります。

const schema = yup.object().shape(
    {
        company: yup.string().min(3).required(),
        website: yup.string(),
        location: yup.string().min(2).required(),
        skills: yup.string().min(3).required(),
        githubUsername: yup
            .string()
            .nullable()
            .notRequired()
            .when('githubUsername', {
                is: (value) => value?.length,
                then: (rule) => rule.min(3),
            }),
        bio: yup.string(),
    },
    [
        // Add Cyclic deps here because when require itself
        ['githubUsername', 'githubUsername'],
    ]
);