[React] Apollo client useQuery 요청이 무한 반복됐던 이유

https://github.com/apollographql/apollo-client/issues/7436#issuecomment-821243699

Infinite loop when using a cache-and-network fetchPolicy · Issue #7436 · apollographql/apollo-client

 

`useQuery( QUERY, { fetchPolicy: "network-first" } )` 를 쓰면 네트워크 요청이 끊임없이 일어나는 버그가 있었다. 결론부터 말하면 Apollo client 3.4버전에서 해결된 문제인데 우리 프로젝트는 3.3을 쓰고 있어서 나타난 문제다. 3.4 버전 이전에서는 nested query가 동일한지 비교하는 로직에 문제가 있었다. useQuery에서 query prop이 바뀌었는지 확인하는 부분에 이상이 있었던 것으로 예상된다. 

사실 fetchPolicy가 원인인지도 긴 시간동안 밝혀내지 못했다. 애석하게도 가끔씩 잘 될 때가 있었기 때문이다! (아니면 그렇게 착각을 했거나) api와 뷰 사이에 의존성을 낮춘 구조로 리팩토링을 했는데 어느 순간 그런 버그를 발견해서 멘탈이 흔들렸다. 원인을 몰라서 답답했고 원인을 알아낸 다음에는 어떻게 해결해야 할 지 몰라서 답답했다. 내가 리팩토링한 hook의 prop이 문제인지, 토큰 불러오기가 매번 되길래 토큰 문제인지, 아니면 여러번 요청하니까 polling인지 정말 여러 방면으로 의심했다. 정성들여 리팩토링한 코드를 최악의 경우에는 엎을 생각까지 하면서 문제가 안 생기는 부분부터 reset한 뒤 변경 사항을 하나씩 적용해 보면서 결과를 확인했다. 아 그런데 라이브러리 버전 문제였다니 알고 나니 조금은 허탈하기도 하다. 겨우 0.1 버전 차인데!

 

오늘의 교훈

- 버그가 났을 때 라이브러리 버전도 의심해 보자

  - 내 머릿속의 버그픽스 알고리즘에 추가하는 걸로...

- 커밋은 자주 찍자

 

알쓸신잡

- apollo client의 gql`` 은 사실 AST(Abstract Syntax Tree. 컴파일러가 만드는 그것)라고 한다. 내부적으로 `string => 해석할수 있는 AST 모양의 Object` 겠지?

 

그대의 결핍은 그대가 성장할 최고의 자산이다
김종원, 인문학적 성장을 위한 8개의 질문

 

요즘 읽고 있는 책에 나온 구절이다