바쁘신 분들을 위한 3줄 요약!

• 토큰 만료 시 자동으로 토큰을 재발급받고 이전의 요청을 재요청하는 useCustomQuery 커스텀 훅 구현
• 함수 내부에서 훅을 사용하기 위한 refetch 함수를 커스텀한 callQuery 함수 구현
• 커스텀 훅에서 서버에서 받은 에러를 핸들링하여 상황에 맞는 동작을 하도록 구현

UseCustomQuery

useCustomQuery 는 apollo hooks의 useQuery에 토큰 재발급 요청과 이전의 요청을 재요청하는 기능을 자동화 시킨 커스텀 훅입니다.

useCustomQuery에서 눈여겨 봐야 할 것은 queryResult callQuery errorHandler 입니다.

하나씩 설명해보도록 하겠습니다.

첫 번째로 queryResult의 동작 방식에에 대해 설명하겠습니다.

1. 기존의 useQuery의 사용법과 같이 인자로 query와 option을 받습니다.
2. useCustomQuery 내부에서 useQuery함수에 인자로 받은 query를 넣어 함수를 실행합니다.
3. useQuery를 통해 서버에 쿼리 요청이 가고, 토큰이 유효하다면 queryResult에 응답받은 데이터가 들어갑니다.
4. 토큰이 유효하지 않다면 onError에서 errorHandler함수가 실행되어 토큰 재발급 로직을 수행하고 이전의 요청을 재요청하게 됩니다. (onError의 errorHandler함수는 아래에서 자세히 설명하겠습니다)
5. errorHandler에서 리턴된 값(reQueryResult)은 토큰을 재발급받고 이전의 요청을 재요청하여 받은 정상적인 응답 데이터입니다.
6. onStartCompleted함수는 정상적인 응답 데이터를 인자로 받고 useQuery의 onCompleted옵션(useQuery 정상적으로 동작했을 때 실행되는 함수)에 데이터를 넣습니다.

<aside> 💡 자세한 코드가 궁금하시다면 여기❗️를 클릭해주세요 😊

</aside>

두 번째로 callQuery에 대해 설명하겠습니다.