[REACT] QueryClient , Query Invalidation

🎣 QueryClient

 

react-query를 프로젝트에 셋팅할 때, 가장 먼저 하는 것은 앱의 최상위에서 QueryClientProvider로 우리의 앱을 감싸주는 일이다.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
...

const queryClient = new QueryClient(); // 새로운 QueryClient인스턴스를 생성

function Root() {
  return (
        <QueryClientProvider client={queryClient}>
            <App />
        </QueryClientProvider>
  ); // QueryClientProvider를 통해 앱 전체에서 생성한 QueryClient에 접근 가능
}

 

우리는 먼저 새로운 QueryClient인스턴스를 생성하고, QueryClientProvider를 통해 앱 전체에서 생성한 QueryClient에 접근 가능하도록 해준다.

 

이 QueryClient는 단순하게 표현하자면 QueryCache와 MutationCache를 담는 그릇이다. 우리는 대부분의 경우에 직접 QueryCache에 접근하기보다, QueryClient를 통해 QueryCache와 MutationCache에 접근한다.

 

QueryClientProvider를 통해 내려준 queryClient에 접근하기 위해서는 useQueryClient를 사용한다.

const queryClient = useQueryClient();

 

🎣 Query Invalidation

 

리액트 쿼리는 서버데이터가 오래되었다는 사실을 어떻게 파악할 것인지, 오래되었가는 것을 알았다면 어제 업데이트 해줄 것인지 등의 이슈를 해결하려 한다.

이를 위해 QueryClient에는 쿼리를 오래된 것으로 표시하고, 잠재적으로 다시 가져올수 있는 invalidateQueries메소드를 제공한다.

 

// 매개변수로 쿼리키가 지정되어 있다면, 해당 쿼리키에 해당하는 쿼리만 모두 무효화 된다.

// 캐시의 모든 쿼리를 무효화함
queryClient.invalidateQueries()
// `todos`로 시작하는 키로 모든 쿼리를 무효화함
queryClient.invalidateQueries({ queryKey: ['todos'] })

쿼리가 invalidateQueries 메소드로 무효화될때 다음과 같은 두가지 상황이 발생한다.

• 쿼리가 오래된 것으로 표시된다. 오래된 상태는 useQuery 또는 관련 훅에서 사용 중인 모든 staleTime 구성에 오버라이드 한다.
• 만약 useQuery 나 관련 훅을 통해 쿼리가 렌더링 되고 있다면 백그라운드에서고 refetch한다.

 

 

 

도움 주신분❤️ :

https://leego.tistory.com/entry/react-query%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%A0%EA%B9%8C

react-query는 어떻게 작동할까

https://hjk329.github.io/react/react-query-query-invalidation/

React Query(리액트 쿼리): Query Invalidation