[Korean FE Article] 쿼리 캐시에 데이터 채워 넣기 (React Query)
소개
React Query에서 데이터를 빠르게 페칭하고 캐싱하는 방법을 설명한 짧은 글입니다. list와 item을 클릭했을 때 detail을 보여주는 형태의 흔히 접할 수 있는 예시를 통해 설명하고 있어 이해하기 편하게 작성되어 있습니다.
원문의 블로그에서 게재하고 있는 React Query 시리즈 중 하나로, 해당 글은 17번째 글 입니다. React Query에 관심있으시다면 각 글에 한글 번역글도 링크되어 있으니 원문의 블로그도 참고해보셔도 좋을 것 같습니다.
tl;dr
페치 워터폴(fetch waterfalls)이란 하나의 요청이 이루어지고 완료될 때까지 다른 요청을 실행하지 않고 기다리는 상황을 말합니다.
서스펜스(suspense)는 리액트에서 프라미스를 풀기 위한 방법으로 로딩 및 에러를 쉽게 처리할 수 있도록 도와줍니다.
서스펜스가 사용된 하나의 컴포넌트에서 여러 개의 쿼리를 사용할 경우 서스펜스 워터폴이 발생하여 너무 긴 시간동안 폴백을 보게 되는 역효과가 발생할 수 있습니다.
React Query의 `prefetchQuery`를 사용하면 컴포넌트가 렌더링 되기 전에 페칭을 시작하며 대기 시간을 크게 단축시킬 수 있습니다
캐시가 읽힐 시점에 확실히 캐시가 존재하도록 하는 또 다른 좋은 방법은 다른 부분의 캐시에서 채워 넣는 것으로, list 데이터로 detail 데이터를 채워 넣는 두 가지 방법이 있습니다.
React Query의 `initialData`로 detail을 렌더링 할 때 list 데이터 캐시를 사용해 초기 데이터를 설정합니다.
`queryFn`에서 list 데이터가 페치된 후 직접 query data에 detail 데이터를 채워 넣습니다.