🔎React Query 기본 사용시 문제점

• 너무 빈번한 네트워크 통신 발생 (참고 포스팅)

💡원인

• Devtools을 보면, 네트워크 통신 하자마자 stale(오래됨) 상태가 됨
• 따라서, useQuery 썼지만 계속 네트워크 통신 통해 새로 받아옴

• 공식문서에 따르면, useQuery 혹은 useInfiniteQuery를 사용해 캐시된 데이터는 기본적으로 stale 상태
  이것을 변경하기 위해서는 query에 staleTime옵션 지정

📌staleTime

• 캐시된 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간
• 기본값 : 0
• fresh 상태일 때 같은 key 값을 가지는 새로운 query가 생성되면 네트워크 통신 X
• stale 상태일 때 같은 key 값을 가지는 새로운 query가 생성되면 기존에 캐시되어있던 것이 UI 상으로 바로 보여지기는 하지만,
  background에서 네트워크 통신을 통해 새로 데이터 받아와서 업데이트됨
  이 때, UI상에 보여지는 것 바뀌면 UI도 다시 업데이트됨

  staleTime 기본값(0)일 때 자동으로 네트워크 통신(refetch) 하는 경우

💡예시

• useQuery 세번째 options 인자 통해 staleTime 5초로 지정

const [checked, setChecked] = useState(false);
const { data, isLoading, error }
  = useQuery(['exampleKey', checked], async () => { 
    console.log('fetching in useQuery...', checked);
    return fetch(`${checked?'sale_':''}/exampleAPI`).then((res) => res.json());
  }, {
    // options 추가
    staleTime: 5000, 
  });
  const handleChange = () => setChecked((prev) => !prev);

• 처음 페이지 로딩하면 체크 여부에 따라 ['exampleKey', false], ['exampleKey', true] 로 각각 캐싱
• staleTime 5초로 설정해뒀기 때문에, 5초동안 fresh 상태
  이 기간 동안 아무리 계속 체크해도 fetch 발생X
• 5초가 지나면 (콘솔참고) stale 상태로 변경됨
  체크를 하면 다시 fetch 발생하고 fresh 상태로 변경됨

📌cacheTime

• 데이터가 inactive 상태로 변경되고, 캐시에 유지되는 시간
  • inactive : query 요청이 끝나고 데이터가 현재 컴포넌트나 어플리케이션의 화면에 표시되지 않거나 사용되지 않는(활성화되지 않은) 상태
• 기본값 : 5분
• cacheTime이 끝나면 가비지 콜렉터로 수집됨
• cacheTime이 끝나기 전에 query 다시 요청 되면, fresh한 데이터를 fetch하는 동안 기존 캐시 데이터 보여줌
• staleTime과 상관없이 데이터가 inactive된 시점을 기준으로 캐시 삭제 결정
• 무조건 캐시를 길게하는게 아니라, 데이터가 백엔드에서 빈번히 업데이트 되는지, 오랫동안 캐시를 해도 괜찮은지 판단해서 시간 적절하게 정해야 함

staleTime vs cacheTime

cacheTime은 데이터가 캐시에 얼마나 오래 유지될지 설정
staleTime은 캐시된 데이터가 얼마나 오래 stale 상태로 유지될지 설정
staleTime이 cacheTime보다 작거나 같아야 함
그렇지 않으면 데이터가 캐시되어도 빈번한 업데이트가 발생❗

📌React Query 사용한 네트워크 통신 과정

• key가 'example' 인 example data를 요청하면,
  네트워크 통신 통해 데이터 fetch하고 key값으로 캐싱한 뒤, 화면에 보여줌
• example data는 fresh 상태에서 staleTime(기본값: 0) 이후 stale로 상태 변경
• 위 상태에서 cacheTime이 지나기 전에,

(1) : 같은 key값을 가지는 새로운 요청 오면
(2) : 해당 key값으로 데이터가 캐싱돼있으므로 기존 데이터 바로 보여줌
(3) : 하지만, 상태가 stale이므로 네트워크 통신 통해 새로운 데이터 요청함

(4) : 네트워크 통신 통해 캐시에 새로운 데이터로 업데이트
(5) : 새로 받아온 데이터와 달라진 부분 업데이트해서 보여줌

• 캐시는 cacheTime만큼 유지되다가 가비지 콜렉터로 수집됨