[⚛️] 쿼리 무효화, 그리고 staleTime & gcTime

 

TodoList의 디테일 페이지와 홈페이지를 오가면서 테스트한 staleTime 과 gcTime

Home

Detail

---

 

 

invalidateQuerise - 쿼리 무효화

// Detail.jsx
  
  const { id } = useParams();
  
const fetchDetail = async () => {
    const response = await todoApi(`/todos/${id}`);
    return response.data;
  };

  const { data, isLoading, error } = useQuery({
    queryKey: ["todos", id],
    queryFn: fetchDetail,
  });

 

홈 -> 디테일 페이지로 들어가면 params로 id를 요청하여 해당 todo의 상세 내용이 뜬다.

로딩 중임을 잘 나타내기 위해 3G 환경을 주었다.

맨 처음 디테일 페이지에 들어가게 되면 값을 새로 불러오기 때문에 '로딩 중' 상태가 되며 Network 탭에도 새로운 값이 잘 불러와진다.

이후 캐싱된 데이터를 보여주기 때문에 로딩된 디테일 페이지에 들어가면 바로 페이지가 그려진다.

 

 

❓새로운 값을 추가하면 어떻게 될까?

// TodoForm.jsx
const { mutate } = useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      queryClient.invalidateQueries(["todos"]);
    },
  });

mutate로 addTodo를 실행하고 invalidate로 쿼리를 무효화한다.

'쿼리를 무효화' 하기 때문에 새로운 쿼리를 받아와서 페이지에 새로 그려준다는 것이라고 생각해왔다.

 

 

아래는 3G 환경에서 페이지에 들어가 새로운 값을 불러온 뒤, todo를 추가하고 다시 그 페이지에 들어가보는 상황이다.

todo를 추가했기 때문에 새로운 쿼리를 받아오는 것이며, '로딩 중...'이 다시 뜰 것으로 예상했다.

하지만 예상과는 다르게 todo 추가 전과 후의 페이지 변화가 없다.

이 현상은 곧 새로운 데이터의 페칭이 아닌 기존에 캐싱된 데이터를 불러 온다는 의미일텐데...

그렇다면 '쿼리를 무효화' 한다는 것은 어떤 것일까?

 

찾아보니 invalidate로 쿼리를 무효화한다는 것은 stale 상태로 만들어준다는 것이었다.

즉, 캐싱된 데이터는 사라지지 않고 stale한 상태로 변하는 것뿐이기 때문에 쿼리 무효화 후에도 바로 데이터가 불러와지는 것이다.

 

 

staleTime & gcTime

stale한 상태는 받아 온 데이터가 신선한(fresh) 상태가 아닌 썩은(stale) 상태인 것이며 캐싱된 데이터는 그대로 남아있다.

따라서 데이터가 stale한 상태가 되면 데이터를 리페칭한다.

 

👇🏻stale된 데이터가 리페칭되는 조건은 다음과 같다.

1. staleTime이 지나서 stale이 된 경우

• staleTime이 만료되면, 데이터는 stale 상태가 된다.
• 하지만 바로 refetch는 하지 않고, 아래 조건 중 하나가 충족될 때 다시 가져온다.

2. 컴포넌트가 다시 마운트될 때 (refetchOnMount)

• stale 상태인 데이터를 사용하는 컴포넌트가 다시 마운트되면 자동으로 데이터를 가져온다.
• 기본값: true → stale 상태면 자동으로 refetch

useQuery({
  queryKey: ["todos"],
  queryFn: fetchTodos,
  staleTime: 1000 * 60 * 5, // 5분 동안 fresh 유지
  refetchOnMount: true, // stale 상태면 마운트될 때 자동 refetch
});

staleTime이 만료된 후, 사용자가 페이지를 다시 방문하거나, 컴포넌트가 언마운트 후 재마운트되면 자동으로 refetch.

 

3. 브라우저 포커스가 다시 활성화될 때 (refetchOnWindowFocus)

• 사용자가 다른 탭을 보고 있다가 현재 탭으로 돌아오면 자동으로 refetch.
• 기본값: true → stale 상태일 때 포커스 이동 시 refetch

useQuery({
  queryKey: ["todos"],
  queryFn: fetchTodos,
  staleTime: 1000 * 60 * 5, // 5분 동안 fresh 유지
  refetchOnWindowFocus: true, // stale 상태일 때 창 포커스 이동 시 자동 refetch
});

false로 설정하면 포커스 이동해도 자동으로 가져오지 않음.

 

4. 네트워크가 다시 연결될 때 (refetchOnReconnect)

• 네트워크가 끊겼다가 다시 연결되면 자동으로 refetch.
• 기본값: true

useQuery({
  queryKey: ["todos"],
  queryFn: fetchTodos,
  refetchOnReconnect: true, // 네트워크 재연결 시 자동 refetch
});

네트워크가 끊어져 있다가 다시 연결되면, stale 상태인 쿼리는 자동으로 refetch.

 

5. 사용자 액션으로 강제 refetch (refetch() 또는 invalidateQueries())

• 개발자가 명시적으로 데이터를 다시 가져오도록 요청할 수도 있다.

const { data, refetch } = useQuery({
  queryKey: ["todos"],
  queryFn: fetchTodos,
  staleTime: 1000 * 60 * 5, // 5분 동안 fresh 유지
});

<button onClick={() => refetch()}>데이터 다시 가져오기</button>

버튼을 누르면 즉시 데이터를 다시 가져옴.

queryClient.invalidateQueries({ queryKey: ["todos"] });

 

6. 특정 시간마다 자동으로 refetch (refetchInterval)

• 일정 주기로 데이터를 새로 가져오도록 설정할 수도 있다.

useQuery({
  queryKey: ["todos"],
  queryFn: fetchTodos,
  refetchInterval: 1000 * 60 * 5, // 5분마다 자동 refetch
});

 

stale 상태와 관계없이 주기적으로 데이터 갱신 가능.

 

리페칭을 위한 다양한 방법들이 있지만

원래 예상했던 반응인 '로딩 중...' 이 뜨게 하기 위해 gcTime을 활용해보았다.

gcTime이 지나면 캐싱된 데이터를 삭제하기 때문이다.

 

gcTime을 0으로 주어 컴포넌트가 비활성화 되자마자 캐싱된 데이터를 삭제시킨다.

staleTime이 더 길지만 gcTime에 영향을 주는 지 궁금했다.

// Detail.jsx

const { data, isLoading, error } = useQuery({
    queryKey: ["todos", id],
    queryFn: fetchDetail,
    gcTime: 0,
    staleTime: 1000 * 60,
  });

Home에는 staleTime을 지정하지 않았기 때문에 기본값, 바로 썩어버린다.

• staleTime이 더 길지만 컴포넌트가 비활성화(Home으로 이동) 되자마자 gcTime이 발현됨
• Devtools에서 확인할 수 있듯이 캐싱된 데이터가 바로 삭제됨

 

staleTime은 데이터가 fresh한 상태의 시간을 지정하며

gcTime은 컴포넌트가 비활성화(언마운트) 되었을 때를 기준으로 시작한다. (기본 5분)

✨ staleTime 과 gcTime 조합

(기본 조건 : staleTime보다 gcTime이 더 김)

const { data, isLoading, error } = useQuery({
    queryKey: ["todos", id],
    queryFn: fetchDetail,
    gcTime: 1000 * 60 * 5,
    staleTime: 1000 * 60,
  });

 

경우 1. data는 fresh, 캐시에 data가 있을 때(staleTime과 gcTime 모두 안 지남)

• staleTime 내에 홈 <-> 디테일을 오가도 캐시된 data를 표시 
• 데이터 refetch 안함 (data가 stale 하지 않음)

 

경우 2. data가 stale, 캐시에 data가 있을 때(staleTime만 지나고 gcTime은 안 지남)

• 새 데이터를 가져오기 전까지 캐싱된 data를 보여줌
• 위의 다양한 경우에 따라서 리페칭이 진행됨

 

경우 3. staleTime보다 gcTime이 짧을 때

• 컴포넌트가 활성화 되었을 때는 gcTime에 관계없이 캐싱된 data를 표시
• 컴포넌트가 비활성화 된 이후로 gcTime이 적용 됨.

 

경우 4. gcTime이 지나 캐싱된 data가 삭제된 경우

• 새로운 데이터를 가져올 때까지(refetch 될 때까지) 어떤 데이터도 반환하지 않음