React-query getQueryData undefined가 발생하는 이유

요약

getQueryData는 특정 쿼리에 대해 구독 상태를 유지하지 않는다. 이말은 초기 렌더링되어 실행될때만 호출되고 그 이후 리렌더링이 발생하기 전까진 데이터가 업데이트 되지 않는다. 따라서 최신의 상태정보를 사용하고 컴포넌트 별 요청을 원하지 않는다면 option에서 staleTime을 잘 설정해서 useQuery훅을 사용해서 가져오면 된다. 이렇게하면 추가요청없이 무사히 데이터를 가져올 수 있게된다

const count = useState(1)[0]

...count + 1

위 코드처럼 setState없이 count를 +1 해봤자 리렌더링 되지 않는다. 이처럼 데이터가 패칭되어도 새로운 값으로 업데이트 되지 않는다. 초기 실행값만을 유지할 뿐이다.

QueryClient | TanStack Query Docs

Access data already fetched with react query in other component

react-query 개발자로 유명하신 분이 써주신 답변이었다.

 

queryClient.getQueryData undefined

처음 불러온 데이터를 여러 컴포넌트에서 사용할 필요성이 생겼다. 이때 데이터를 불러오는 컴포넌트와 같이 렌더링 되기 때문에 한 곳에서 이미 데이터를 fetch해 오는데 굳이 이걸 또 fetching하는 useQuery hook을 사용해서 데이터가 여러번 fetching 되지 않을까 생각했다.

 

물론 지금 와서 생각해보면 이해도가 많이 부족했다고 생각하는데 react-query의 stale-while-revalidate를 떠올려보면 쉽다.

option만 잘 설정해도 여러 개의 컴포넌트에서 불려지는 동일한 useQuery hook이 여러 번의 fetching이 실행되지 않는지 이해할 수 있었다.

stale-while-revalidate로 최신 상태 유지

 

 

회고

아무런 이유 없이 이게 어떤 전략을 가지고 동작하는 것인지 궁금해서 몇개 더 읽어보았다.

그러면서 문득 든 생각이 react-query가 인기있는 라이브러리로 많이 사용되는 이유는 정말 좋은 문서화 때문이 아닐까 하는 생각을 하게 되었다.

Practical React Query