개발자
개인 프로젝트에서 useQuery를 커스텀 훅으로 사용중입니다. (v5 사용중이며, staleTime과 gcTime은 기본값 사용중. staleTime 0, gcTime은 5분) 테스트를 위해 컴포넌트에서 자체 state를 변경했습니다. 리랜더링이 되기에 훅 안에 있는 useQuery도 다시 실행되는 걸 기대했습니다. 그런데 network탭을 보니 서버 요청이 안되더라구요..!(최초 요청 하나만 표시) 데이터가 stale한 상태에서 state변경시 useQuery는 데이터를 다시 fetch해와야하는 것 아닌가요~? 왜 이런지 궁금합니다..!
답변 1
인기 답변
staleTime은 잘 이해하신 것 같아요. staleTime은 방금 fetch해온 fresh한 데이터가 stale로 변하는 시간을 말합니다. staleTime에 도래하면 데이터의 상태가 stale이되고 react query는 다시 fresh한 데이터를 가져오려고 합니다. 이제 새로운 데이터를 받아오려고 할 때 gcTime을 확인합니다. 만약 gcTime이 지났다면 cache되어있는 데이터가 없으니 서버로 요청을 보내서 새로운 데이터를 받아옵니다. 하지만 gcTime이 지나지 않았다면 cache에 데이터가 있으니 굳이 서버로 요청을 보내지않고 cache에서 데이터를 가져옵니다 그래서 서버로 fetch요청이 넘어가지 않았을거에요. gcTime을 0이나 또는 짧은 값으로 변경하면 서버로 요청이 넘어가는 것을 확인하실 수 있을거에요. 만약 gcTime을 변경했는데도 서버로 요청이 들어가지 않는다면 다른 설정들도 살펴봐야 할 것 같습니다
김선진
작성자
소프트웨어 엔지니어 • 2024년 02월 01일
안녕하세요! 평소에 병진님이 쓰신 글들 잘 읽고 있습니다. 이렇게 답변 주셔서 감사해요!!^^ 읽다보니 추가적으로 질문이 있습니다:) ‘staleTime이 도래하고 gcTime이 지나지 않은 상태라면’ 우선 cache에 있는 데이터를 보여주고 백그라운드에서 서버요청을 하는 것으로 알고 있습니다. 병진님은 굳이 서버로 요청을 보내지 않는다고 하셨는데 어떤게 맞는지 궁금합니다..!
강병진
GS 52g Studio 개발자 • 2024년 02월 01일
선진님 안녕하세요! 제가 지난달에 React 강의를 하면서 선진님 케이스처럼 gcTime이 도래하기 전에 서버로 요청이 들어가는지 확인했던 적이 있습니다. 서버 로그를 확인하면서 테스트를 해봤는데, gcTime이 지나기 전까지는 서버로 요청이 들어가지 않더라구요. 하지만 공식문서를 보면 선진님 말씀처럼 gcTime이 도래하지 않았다면 cache에 있는 데이터를 리턴하고, fetch하는 함수를 백그라운드에서 실행한다고 되어있습니다. 예시에서 A second instance of useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) mounts elsewhere. The new instance triggers a new network request using its query function. 라는 내용으로 볼 때, 이건 같은 key를 가진 useQuery가 여러 곳에서 사용되는 경우인 것 같아요. 이때는 처음에 mount된 useQuery는 fetch를 하지 않지만, 두번째로 mount된 같은 key를 가진 useQuery의 fetch결과를 사용하는 것 같습니다
김선진
작성자
소프트웨어 엔지니어 • 2024년 02월 01일
병진님 친절하고 자세한 설명 감사합니다..! 리액트쿼리가 알면 알수록 배워야할게 많은것 같아요. 말씀을 정리하면 A화면에서 첫마운트된 useQuery는 해당 화면에서 (cacheTime이 도래하기 전까지) 계속 cache 데이터를 쓰는 것이고, B화면에서 동일한 쿼리키로 첫마운트된 useQuery는 fetch를 다시 한다는 것 맞을까요~?(B화면에서도 이후에는 state가 변경되어도 cache 데이터 사용)
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!