Formink, Yup, Apollo를 통해 비동기적인 효과를 만들어냈습니다.

안녕히 계십시오.

이 글은 mediba Advent Calendar 2021 19일째 글입니다.
저는 미디어바유한공사에서 프론트 엔지니어를 맡고 있는 양입니다.
본사 서비스의 CMS 개발에서는 BE를 통해 파일을 식별해야 한다.
관련 스택은 다음과 같습니다.

Formik

Yup

Apollo

하고 싶은 일:

파일 업로드 = 유효화 API 두드리기

같은 파일을 두 번 올려도 검증(내용의 변경 등)

다시 업로드하지 않으면 이전 평가 결과 출력

파일 업로드 처리

파일 업로드 = 두드리기 효과 API✅
Formink의 Field를 사용자 정의하여 파일을 업로드할 때 제어합니다.

  const handleFileChange = React.useCallback(
    async (event: any) => {
      if (event.target.files && event.target.files[0]) {
        const file = event.target.files[0];
        setLoading(true);
        await client.query({
           query: validationDocument,
	    variables: {
	      fileToBeCheck: file,
	    },
          fetchPolicy: 'network-only',
        });
        setLoading(false);
        form.setFieldValue(fileInput, file);
        form.setFieldTouched(fileInput, true); //Fieldが触れる前にバリーデーション発火しない
      }
    },[]);

fetchPolicy를 network-only로 설정
간단하게 API를 두드려 응답을 캐시에 저장합니다.
파일 이름뿐만 아니라 같은 파일을 두 번 업로드해도 검증 가능✅
인풋을 속이기 위해 다음 온클릭 이벤트를 제작한다.

const onClickTrick = React.useCallback(
    (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
      event.currentTarget.value = '';
    },
    []
  );

input에 설치하는 것을 잊지 마세요.

<input ...name={fileInput} onClick={onClickTrickInput} onChange={handleFileChange}/>

구문 함수 만들기

다시 업로드하지 않으면 이전의 효과 결과를 출력합니다✅
내용
캐시에서만 체크아웃 결과 읽기

const customizedValidator = (file: File, context: TestContext) => {
  const validationResult = client.readQuery({
    query: validationDocument,
    variables: {
      fileToBeCheck: file,
    },
  });
  if (validationResult) {
    const errorMessage = validationResult?.error_message;
    if (validationResult?.success) return true;
    if (Array.isArray(errorMessage) && errorMessage.length > 0) {
      return context.createError({
        message: errorMessage,
      });
    }
  }
  return false;　 //　apollo clientでエラーハンドリングしてるので、ここでfalseだけ返す
};

yup으로 가공

Yup.object({
 fileInput: yup.mixed().test(
   (file, context) => 
     file ? customizedValidator(file,context) : true
 ),
})

최후

이번엔 못 보던 방법으로 w를 많이 만들었는데,
또 다른 방법이 많을 거라고 믿습니다.
가장 좋은 실천이 아니더라도 창조성이 있어야 한다
↓ 우리집 고양이↓