어떤 문제를 겪었나...
- search요청을 통해 api가 잘 되는지 이미 확인하고 infinite query를 적용하고자 함.
- search요청을 통해 받는 데이터에 추가 가공하는 부분에 잘못된 점을 인지하고 수정함
=> 여기서 수정한 점은 Promise요청을 통해 병렬 처리를 하려 했으나 계속 각자 요청하게 되는 잘못된 코드를 수정 - 수정을 통해 완성된 코드를 infiniteQuery에 적용시켜 queryFn에서 실행시키는 search요청 데이터를 통해 가공된 데이터를 돌려주고자 작성
- 지속적인 error 발생. 하지만 네트워크 탭에는 200이며 데이터들이 보임
=> 에러 처리 구문을 타고 들어간 에러의 status, statusText를 보니 모두 undefiend
(여기서 맨탈이 터짐..) - 여기저기 찾아보면서 이유를 찾다가 지속적인 오류를 겪음
대충 요약하면 이런 내용이다..
문제는 내가 어디서 잘못한건지 인지하지 못함과 어떤 부분이 잘못된지 알 수 없다는 무능력함을 느끼며 멘탈이 깨졌었다..
분명 infinite query를 적용하기 전엔 잘 되었으니깐...
그래서 어떻게 해결해갔나
정말 이것저것 찾아보고 tanstack-query 공식문서도 2일동안 찾아보았지만 해당 이유가 나올리 없었다..
그래서 평소에 사용하는 claude에도 질문을 해보았지만 나와 별 다를게 없는 생각뿐이었다.
그러다 문득 예전에 겪었던 문제가 생각났다.
그때 당시 api요청부에서 !response.ok 에러처리를 해주고 return response.json()을 해주어 보내는게 문제였다.
그래서 혹시나 싶어 질문으로 response.json()을 바로 돌려주면 문제가 될까 했더니 수정하니 정상 동작을 하였다..
진짜 3일정도? 온갖 방법을 다 찾아보고 적용도 해보고 바꾸어보고 했는데 진전이 없다 결과적으론 api요청부에서 파싱된 JSON데이터를 돌려준다는것이 문제였던것이다...
이유는 이렇다.
만약 fetch메서드를 사용하여 response를 생성하였다고 해보자.
export const fetchAPI = async ({q, pageToken} : { q: string, pageToken?: string)} => {
try {
const response = await fetch(`https://someapi.com/q?=${q}&pageToken=${pageToken}`)
if (!response.ok) {
console.error('API Error:', response.status, response.statusText);
throw new Error(
`Failed to fetch Youtube videos: ${response.status}, ${response.statusText}`,
);
}
return response.json()
} catch(error) {
console.error("fetch API Error", error)
throw new Error(`fetch error state: ${response.status}, ${response.statusText}`) 이렇게 주게 되면 response는 객체인데 사용하는 부분에서 호출을 하여 응답을 받더라도 이미 확인을 하여 더 이상 확인할 정보가 없는 JSON데이터만 돌려준다는거다.
즉, 추후 컴포넌트나 어떤 특정 위치에서 error를 확인할 수 없다는거다.
왜냐면 이미 상자를 열어버린 상품이 된다는것이다.
고로 내가 작성한 부분에 가장 큰 오류는 습관적으로 return response.json()을 해줬다는 점이었다..
혼자 무언가를 해보려고 뚱땅거리다보니 내가 편하려고 하였던 방식이 다른 사람이나 외부에서 사용하게 되는 api의 경우 처리를 제대로 못할수 있다는 확인을 하였다.
그럼 어떤 문제가 생기길래 response로 돌려줘야하나?
이 문제에 모두 그렇다고 할 수 없지만 만약 API 요청에 대한 응답이 401,403,500 등이 있다고 해보자.
앞전 형태로 response.json()으로 돌려주게 된다면 응답에 대한 코드를 확인할 수 없는 상황이 생길수 있다.
그럼 내가 어떤 문제로 호출에 실패하였는지 알 수 없는 상황이 생긴다(지금처럼...)
만약 response에 대한 객체가 항상 성공이거나 status, statusText를 확인할 필요가 없다면 굳이 response로 안돌려주고 response.json()으로 돌려줘도 된다는 이야기다.
혹은 에러 처리를 함수 내부에서 모두 다 해주고 있는 상황이고 throw를 통해 처리가 잘 되어있는 경우이다. (이 경우도 내가 잘했어야했다...)
결론
결론적으로 앞전에 간략하게 설명한것처럼 선택지가 있다.
1. response에 대한 객체를 JSON파싱하지 않은 상태로 돌려준 후 사용처에서 파싱한다.
2. 모든 에러처리를 확실하게 구성을 한 후 사용한다.
이 둘중 한가지만 잘해도 이런 오류를 반복하지 않을것같다.
경험이 늘어나는것은 좋지만 해결을 지속적으로 못한것이 너무 분하다..
항상 적은 나구나를 다시 깨닫는 하루였다..ㅠ
