[ReactNative]react-query useInfiniteQuery 사용 시 "observer.getCurrentResult is not a function" 에러 해결 방법

React Native에서 @tanstack/react-query의 useInfiniteQuery를 사용하던 중, 갑자기 앱이 크래시되면서 다음과 같은 에러 메시지를 보신 적 있나요?

TypeError: observer.getCurrentResult is not a function

 

처음엔 코드에서 무언가 잘못됐나 싶었지만, 알고 보니 React Native와 @tanstack/react-query 최신 버전 간의 호환성 문제가 원인이었습니다. 오늘은 이 문제를 어떻게 해결할 수 있었는지 정리해보려 합니다.

 

React Native 프로젝트에서 다음과 같이 useInfiniteQuery를 사용하고 있었습니다.

const {
  data,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage,
} = useInfiniteQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
});

 

그런데 앱 실행 후 특정 시점에 다음과 같은 에러와 함께 앱이 강제 종료되었죠.

TypeError: observer.getCurrentResult is not a function

 

디버깅을 위해 공식 문서를 살펴보고, 다양한 StackOverflow 글을 확인해본 결과, 해당 문제는 React Native 환경에서 @tanstack/react-query v5 이상 버전과의 호환성 문제로 인해 발생하는 것으로 확인됐습니다.

 

---

원인: @tanstack/react-query와 React Native의 호환성 문제

해당 에러는 내부적으로 QueryObserver 객체를 기대하는 코드에서, 예상과 다른 객체가 넘어오며 getCurrentResult 함수가 없다는 오류를 던지게 됩니다. 이는 @tanstack/react-query의 내부 API가 변경되면서, 특정 React Native 환경에서는 이와 맞지 않게 동작하게 되는 것입니다.

사실 공식 문서에서는 React Native에 대한 특별한 주의사항을 언급하고 있지 않지만, GitHub 이슈 트래커에는 동일한 문제를 겪고 있는 유저들의 리포트가 종종 보입니다. 그중 다수는 react-query 버전을 좀더 마이너한 버전으로(v5 Release note 참고!)

---

해결 방법: @tanstack/react-query 버전 다운그레이드

현재 가장 안정적으로 작동하는 버전은 @tanstack/react-query@4.x입니다. 다음과 같이 버전을 명시하여 설치하면 문제를 해결할 수 있습니다.

 

버전을 낮춘 후에는 useInfiniteQuery가 정상적으로 작동하며, 더 이상 크래시가 발생하지 않게 됩니다.

 

마무리하며

최신 라이브러리를 사용하는 건 항상 좋은 일이지만, 때로는 환경 간 호환성 문제로 인해 예상치 못한 오류를 겪을 수 있습니다. 특히 React Native는 웹과는 다소 다른 런타임 환경이기 때문에, 이러한 버전 이슈에 더욱 민감할 수 있습니다.

이번 사례처럼, "observer.getCurrentResult is not a function" 같은 에러가 발생했을 때는 라이브러리 버전 간의 호환성도 의심해보는 습관이 필요합니다. 버그인지, 호환성 문제인지, 혹은 우리가 잘못 사용한 것인지 구분하는 것도 개발자의 중요한 역량이니까요 😊

---

혹시 이 글이 도움이 되셨다면 댓글이나 좋아요로 알려주세요! 그리고 여러분도 비슷한 경험이 있다면 공유해주세요 🙌