React Query 에서 모든 캐쉬된 쿼리에 권한을 갖는 QueryClient 사용법 그리고 개념정리

 

(이전글)

2023.01.26 - [개발로그/ReactNative] - React Query 중요한 개념 : 캐싱과 쿼리 키

React Query 중요한 개념 : 캐싱과 쿼리 키

이전 글에서 refetch 하는 방법을 적었었다.  useQuery를 사용하면서 반환되는 옵션들 중 refetch 를 받아 명시적으로 호출하는 것. 

// 쿼리 선언시 refetch 함수를 반환받는다.
 const {
    isLoading: trendingLoading,
    data: trendingData,
    refetch: refetchTrending, // 키가 "trending"인 쿼리를 refetch하려면 refetchTrending()을 호출하면 된다.
    isRefetching: isRefetchingTrending, // isRefetching은 Hook 이다. 이 값을 그냥 컴포넌트에 주면된다.
  } = useQuery("trending", moviesAPI.treding);
  
  
 // 필요한 시점에 함수를 호출한다.
  const onRefresh = async () => {
         refetchTrending();    // refetching manually
  };

< useQuery() 의 Option으로 manually하게 refetch 하는 예제> (ㅋㅋㅋ 먼가 써놓고 나니 이게 영어냐 한국어냐;;)

 

이 방법의 단점은 다른 화면에서는 이 쿼리에 대한 refetch  함수를 실행할 수 없다는 것이다. 

이럴때 모든 쿼리에 대해 제어 권한을 갖는 QueryClient 를 사용하게 된다. 

 

 

QueryClient

 

• queryClient.refetchQueries
• queryClient.cancelQueries
• queryClient.removeQueries
• queryClient.resetQueries
• queryClient.isFetching
• queryClient.isMutating
• queryClient.getDefaultOptions
• queryClient.setDefaultOptions
• queryClient.getQueryDefaults
• queryClient.setQueryDefaults
• queryClient.getMutationDefaults
• queryClient.setMutationDefaults
• queryClient.getQueryCache
• queryClient.getMutationCache
• queryClient.clear

QueryClient

쿼리 클라이언트는 모든 쿼리에 대해 삭제,중지 , 캔슬 부터 refetch 까지 할 수 있다. 

 

QueryClient 사용법

사용법 1. import 와 queryClient 생성

 import { QueryClient } from 'react-query'
 
 // 클라이언트 생성시 옵션을 넣어줄 수 있다. 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       staleTime: Infinity,
     },
   },
 });
 
 // 물론 옵션 없이 생성할 수 있다.
 const queryClient = new QueryClient();

사용법 2. 캐쉬된 쿼리들 중 어떤 것을 사용할 것인지 선택하는 방법  

 

<예제 쿼리들>

  const {
    isLoading: nowPlayingLoading,
    data: nowPlayingData,
    refetch: refetchNowLoading,
    isRefetching: isRefetchingNowLoading,
  } = useQuery("nowPlaying", moviesAPI.nowPlaying); 
 
  const {
    isLoading: upCommingLoading,
    data: upCommingData,
    refetch: refetchUpcomming,
    isRefetching: isRefetchingUpcomming,
  } = useQuery(["movies","upComming"], moviesAPI.upcomming);
  const {
    isLoading: trendingLoading,
    data: trendingData,
    refetch: refetchTrending,
    isRefetching: isRefetchingTrending,
  } = useQuery(["movies","trending"], moviesAPI.treding);

useQuery의 첫번째 param으로 들어간 Array 또는 String 이 query key 가 된다.  (userQuery 사용법 자세히보기)

이때 "nowPlaying"과 같이 string 으로 선언된 쿼리키는 ["nowPlaying"]과 동일하게 취급된다. 

b Bn'j'';l.'

 

만약, ["movies","upComming"] 으로 쿼리키를 선언했다면, queryClient 사용시 "movies" 를 갖는 쿼리들을 선택하여(=쿼리하여,질의하여) refetch, remove, cancle 등을 할 수 있게 된다. (query key 선언하는 방법)

 

queryClient.refetchQueries("movies"); // "movies" 쿼리키를 갖는 것들을 대상으로 refetch한다.

위에도 적었듯이, 어떤 컴포넌트에서 선언된 쿼리들이던 관계없이 모두 접근 가능하므로 쿼리키만 조건에 맞다면 모두 기능을 수행할 수 있다. 매우 큰 장점.

 

사용법 3. refetch가 수행되었느지 확인하는 방법. (단순한 방법)

useQuery에서 isRefetching을 넘겨 받은 후 로그로 찍어보면 됩니다. 

 const {
    isLoading: trendingLoading,
    data: trendingData,
    refetch: refetchTrending,
    isRefetching: isRefetchingTrending, //isRefetching에 대한 상태값을 hook으로 넘겨받음
  } = useQuery(["movies","trending"], moviesAPI.treding);
  
  
  consol.log(isRefetchingTrending);
  
  -----
  true (or false)