2024/12 2

tanstak query의 staleTime과 gcTime 차이

staleTime데이터가 오래됐다. 유효기간이 만료됐다. 데이터는 여전히 캐시에 있다. 그저 데이터를 다시 검증해야한다는 뜻이다.  데이터 prefetch는 데이터가 stale일 때만 트리거된다. (쿼리 포함하는 컴포넌트 다시 마운트되거나 브라우저 창이 리포커싱될 때)stale 시간을 데이터의 최대 수명으로 생각하면된다. (서버로부터 가장 신선한 데이터 버전을 가져오기 전에 데이터를 살려둘 건지) - useQuery 옵션에서 stale 시간 조정 가능const { data, isError, error, isLoading } = useQuery({ queryKey: ["posts"], queryFn: fetchPosts, staleTime: 2000, }); 데이터가 stale이어야 re..

🖥FrontEnd/React 2024.12.30

tanstack query의 isFetching과 isLoading 차이, React Query Dev Tools

isFetching비동기 쿼리가 아직 해결되지 않았다.아직 fetch가 완료되지 않았지만, axios 호출이나 graphGL 호출 같은 다른 종류의 데이터를 가져오는 작업일 수 있다.  isLoadingisFetching의 하위 집합으로 로딩 중이라는 것을 말한다. 쿼리 함수가 아직 미해결이지만, 캐시된 데이터도 없다. 이 쿼리를 전에 실행한 적이 없어서 데이터를 가져오는 중이고 캐시된 데이터도 없어서 보여줄 수 없다.  => 페이지네이션 측면에서 캐시된 데이터가 있는지 없는지 구분하는 것이 중요  React Query Dev Tools=> 모든 쿼리의 상태, 활성, 비활성, stale(오래됨) 등을 알려준다. => 마지막 업데이트 시간도 알려준다.  => 데이터 탐색기도 있어서 쿼리로 받은 데이터를 볼..

🖥FrontEnd/React 2024.12.29
반응형