@frolog/frolog-api

프론트엔드-백엔드 간 및 서비스 간 통신에 사용될 API 요청 추상화 모듈.

JWT 토큰 헤더 추가, HTTP 요청, DTO 유효성 자동 검사가 포함되어 있습니다.

설치 방법

npm i @frolog/frolog-api --save

사용 방법

초기화

먼저, 호출하고 싶은 API 엔드포인트 클래스를 불러와 초기화합니다. 이때 옵션으로 baseURL과 accessToken을 지정할 수 있습니다.

import { SignUp } from '@frolog/frolog-api';

const signUp = new SignUp({
    baseURL: 'https://api.frolog.kr',
    accessToken: () => {
        // 액세스 토큰을 가져오는 로직...
        return token;
    },
});

데이터 로드

그 다음, fetch() 메소드를 통해 요청을 보냅니다.

const data = await signUp.fetch({
    email: 'user@frolog.kr',
    // 나머지 속성들...
});

useQuery를 사용하는 경우

리액트에서 useQuery 사용 시, 다음과 같이 사용할 수 있습니다.

const { isLoading, error, data } = useQuery(
    'signUp',
    () => new SignUp(options).fetch({
        email: 'user@frolog.kr',
        // 나머지 속성들...
    }),
);

중간 단계를 가로채고 싶은 경우

만약 Request와 Response를 직접 조작하거나 단계별로 디버깅하고 싶은 경우, fetch() 대신 createRequest()와 parseResponse() 메소드를 호출하세요.

const signUp = new SignUp(options);

// (1) 요청 DTO -> Request
const request = await signUp.createRequest({
        email: 'user@frolog.kr',
        // 나머지 속성들...
});
console.debug(request);

// (2) Fetch API 사용
const response = await fetch(request);
console.debug(response);

// (3) Response -> 응답 DTO
const resDto = await signUp.parseResponse(response);
console.debug(resDto);

발생하는 오류

FetchError

HTTP 응답 코드가 성공이 아닐 때 발생합니다.

• status 상태 코드.

ValidationError

DTO 유효성 검사에 실패했을 때 발생합니다.

• errors Ajv 오류 배열.