리액트쿼리(v3) - QueryClient 클래스

QueryClient 클래스 [문서]

• QueryClient 는 캐시와 상호작용 할 때 사용한다

import { QueryClient } from "react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
    },
  },
});

await queryClient.prefetchQuery("posts", fetchPosts);

// await queryClient.prefetchQuery({queryKey: ["posts"], queryFn: fetchPosts});  이건 v4버전

options

• queryCache?: QueryCache
  • Optional
  • The query cache this client is connected to.
• mutationCache?: MutationCache
  • Optional
  • The mutation cache this client is connected to.
• defaultOptions?: DefaultOptions
  • Optional
  • Define defaults for all queries and mutations using this queryClient.

methods

• queryClient.fetchQuery
• queryClient.fetchInfiniteQuery
• queryClient.prefetchQuery
• queryClient.prefetchInfiniteQuery
• queryClient.getQueryData
• queryClient.getQueriesData
• queryClient.setQueryData
• queryClient.getQueryState
• queryClient.setQueriesData
• queryClient.invalidateQueries
• 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

메소드 설명

1. queryClient.fetchQuery

• 데이터를 리졸브 하거나 에러를 던지는 비동기 메소드이다. (패치하거나 쿼리를 캐시할 때 사용)
  • 만약 result 가 필요하지 않은 채 쿼리를 패치 해야 되는 거면 prefetchQuery 를 대신 사용해라
• 쿼리가 존재하고, 데이터가 invalidated 거나 오래돼서 stale 이면 캐시에 있던 데이터를 리턴한다. 반면 최신 데이터를 패치하려고 시도한다.

fetchQuery 랑 setQueryData 의 차이

fetchQuery는 비동기적이며 데이터를 가져오는 동안 동일한 쿼리에 대한 useQuery 인스턴스를 사용하여 이 쿼리에 대한 중복 요청이 생성되지 않도록 한다

try {
  const data = await queryClient.fetchQuery(queryKey, queryFn);
} catch (error) {
  console.log(error);
}

• fetchQuery의 options 는 useQuery 랑 동일한데
• enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, notifyOnChangeProps, notifyOnChangePropsExclusions, onSuccess, onError, onSettled, useErrorBoundary, select, suspense, keepPreviousData, placeholderData 이 옵션들은 useQuery 랑 useInfiniteQuery 에만 있다.

2. queryClient.fetchInfiniteQuery

• fetchQuery 랑 비슷한데 fetch 하고 infinite query 를 캐시할 때 사용한다.

try {
  const data = await queryClient.fetchInfiniteQuery(queryKey, queryFn);
  console.log(data.pages);
} catch (error) {
  console.log(error);
}

3. queryClient.prefetchQuery

• 이 메소드는 비동기 메소드다. useQuery 와 그 친구들을 랜더링 하거나 필요로 하기 전에 미리 패칭할 때 사용한다.
• 이 메소드의 옵션은 fetchQuery 랑 비슷하다. 다른 점은 얘는 아무것도 리턴하지 않는다.

await queryClient.prefetchQuery(queryKey, queryFn);
await queryClient.prefetchQuery(queryKey); // default queryFn 을 설정했을 때

4. queryClient.prefetchInfiniteQuery

• prefetchQuery 랑 비슷한데, prefetch 하고 infinite query 에 캐시한다
• 옵션은 fetchQuery 랑 동일

await queryClient.prefetchInfiniteQuery(queryKey, queryFn);

5. queryClient.getQueryData

• 이 메소드는 동기적인 함수다. 이미 캐시에 존재하는 데이터를 사용할때 쓴다.
• 쿼리키나 쿼리필터를 넘겨서 이에 해당하는 쿼리들을 리턴해준다. (매칭되는게 없으면 빈배열 리턴)

const data = queryClient.getQueriesData(queryKey | filters);

6. queryClient.setQueryData

• 동기함수이다. 쿼리의 캐시데이터를 즉시 업데이트 할때 사용한다. 해당 쿼리가 없다면 생성해준다.
• 업데이트 된 쿼리가 쿼리 hook에 의해 사용되지 않을 경아 캐시타임이 지나가면 쿼리는 가비지 콜렉트(캐시에서 제거)됩니다.

queryClient.setQueryData(queryKey, updater);

• queryKey: QueryKey: Query Keys
• updater: TData | (oldData: TData | undefined) => TData
  • updater 에 함수가 아닌 걸 전달하면, 해당 값으로 데이터가 업데이트 됨
  • updater 에 함수가 전달되면 이전 old data를 매개변수로 받고 업데이트 할 새로운 값을 리턴한다.

7. queryClient.getQueryState

• 동기 함수로 존재하는 쿼리 스테이트를 가져올때 사용한다. (없으면 undefined를 리턴한다.)

const state = queryClient.getQueryState(queryKey);
console.log(state.dataUpdatedAt);

8. queryClient.setQueriesData

• 동기 함수로, 필터함수를 이용해 캐시에서 매칭되는 여러 쿼리들을 업데이트 한다.

9. queryClient.invalidateQueries

• 캐시에 있는 쿼리(들)을 무효화 하거나 refetch 할때 사용한다.

await queryClient.invalidateQueries(
  "posts",
  {
    exact,
    refetchActive: true,
    refetchInactive: false,
  },
  { throwOnError, cancelRefetch }
);

10. queryClient.refetchQueries

• 특정 조건에서 쿼리들을 리패치 할 때 사용한다.

// refetch all queries:
await queryClient.refetchQueries();

// refetch all stale queries:
await queryClient.refetchQueries({ stale: true });

// refetch all active queries partially matching a query key:
await queryClient.refetchQueries(["posts"], { active: true });

// refetch all active queries exactly matching a query key:
await queryClient.refetchQueries(["posts", 1], { active: true, exact: true });

11. queryClient.cancelQueries

• 캐시에서 outgoing 하는 쿼리들을 캔슬할 때 사용한다.
• 최적의 update 를 수행시 사용하면 유용하다.

await queryClient.cancelQueries("posts", { exact: true });

12. queryClient.removeQueries

• 캐시된 쿼리들을 제거할 때 사용한다.

13. queryClient.resetQueries

• 초기 스테이트로 캐시에 있는 쿼리들을 초기화 할때 사용한다.
• clear는 모든 구독자를 모두 제거해버리지만, resetQueries는 구독자에게 리셋을 알리고 사전 로드된 state로 리셋시킵니다.
• 쿼리가 initialData 가 있으면, 이걸로 리셋시킨다.
• 쿼리가 active 면, 리패치된다.

queryClient.resetQueries(queryKey, { exact: true });

14. queryClient.isFetching
15. queryClient.isLoading
16. queryClient.isMutating
17. queryClient.getDefaultOptions

• 클라이언트를 생성할때 세팅된 default options (or setDefaultOptions) 를 리턴한다.

const defaultOptions = queryClient.getDefaultOptions();

18. queryClient.setDefaultOptions

• 이 쿼리 클라이언트에 동적으로 default options 를 설정할 때 사용한다. 이전 값은 덮어쓰기 됨

queryClient.setDefaultOptions({
  queries: {
    staleTime: Infinity,
  },
});

19. queryClient.getQueryDefaults

• 특정 쿼리에 대한 default options 를 리턴한다.

const defaultOptions = queryClient.getQueryDefaults("posts");

20. queryClient.setQueryDefaults

• 특정 쿼리에 대한 default options 를 설정할 때 사용한다

queryClient.setQueryDefaults("posts", { queryFn: fetchPosts });

function Component() {
  const { data } = useQuery("posts");
}

21. queryClient.clear

• 연결된 모든 캐시를 제거한다

queryClient.clear();