Tanstack Query refetch 함수와 invalidateQueries 함수

refetch 함수와 useQueryClient의 queryClient.invalidateQueries 함수는 둘 다 React Query에서 데이터를 다시 가져오는 데 사용된다.

refetch 함수

refetch 함수는 특정 쿼리의 데이터를 다시 가져온다. 주로 컴포넌트 내에서 호출되어 해당 컴포넌트가 사용하는 쿼리를 다시 불러오고 업데이트하는 데 사용된다.

장점

• 간편함: 단일 쿼리를 다시 가져오는 데 매우 직관적이고 간단하다.
• 사용 용이성: 컴포넌트 내부에서 쉽게 호출할 수 있다.
• 구체적: 호출된 쿼리에만 영향을 미치므로, 특정 데이터만 새로 고침이 필요할 때 적합.

단점

• 제한된 범위: 다른 쿼리나 데이터와 연결된 경우, 하나의 쿼리만 갱신하므로 부족할 수 있다.

queryClient.invalidateQueries 함수

queryClient.invalidateQueries 함수는 주어진 쿼리 키와 일치하는 모든 쿼리를 무효화하고, 이들 쿼리를 다시 가져오도록 트리거한다.

장점

• 광범위한 적용: 특정 키와 일치하는 여러 쿼리를 한 번에 무효화하여 다시 가져오게 할 수 있다.
• 캐시 관리: 캐시를 더 잘 제어할 수 있으며, 데이터 일관성을 유지하는 데 유용하다.
• 조직적: 더 큰 범위에서 여러 컴포넌트나 데이터가 연관된 경우 효과적이다.

단점

• 복잡성: 여러 쿼리가 연관되어 있을 때 의도하지 않은 쿼리도 무효화될 수 있다.
• 성능: 여러 쿼리를 한 번에 무효화하고 다시 가져오면 성능에 영향을 줄 수 있다.

예제

refetch 사용 예제

const { data, error, isLoading, refetch } = useQuery('user', fetchUser);

return (
  <div>
    <button onClick={() => refetch()}>Refetch Data</button>
  </div>
);

 

queryClient.invalidateQueries 사용 예제

import { useQueryClient } from 'react-query';

const MyComponent = () => {
  const queryClient = useQueryClient();

  const handleInvalidate = () => {
    queryClient.invalidateQueries({ queryKey: ['user'] });
  };

  return (
    <div>
      <button onClick={handleInvalidate}>Invalidate and Refetch Data</button>
    </div>
  );
};

 

Usage

1. 단일 쿼리 갱신: 특정 컴포넌트에서 하나의 쿼리만 다시 가져오려면 refetch를 사용
2. 여러 쿼리 갱신: 관련된 여러 쿼리를 다시 가져오거나, 글로벌하게 캐시를 무효화해야 하는 경우 invalidateQueries를 사용

결론

• refetch: 특정 쿼리만 다시 가져와야 할 때 간단하고 직관적인 방법.
• invalidateQueries: 특정 쿼리 키와 일치하는 모든 쿼리를 무효화하고 다시 가져와야 할 때 유용. 데이터 일관성을 유지하고 캐시를 더 잘 관리할 수 있음.