Query Key
-
React Query는 쿼리키를 기반으로 쿼리 캐싱을 관리한다.
-
쿼리키는 간단한 문자열의 배열이나 중첩된 객체의 배열이여야 한다. => 배열이여야 한다!!
-
query keys는 query data에 고유하고 직렬화하여 사용해야한다.
Query Key의 Hashing?
-
useQuery를 통해 데이터를 가져오면 => queryKey값을 기반으로 QueryClient에 저장
-
staleTime은 리엑트 쿼리애개 캐시된 데이터를 얼마나 자주 최신화 시켜줘야 하는지 알려줌.
-
cacheTime이 지났다면 GC에 의해 Query Manager에서 사라진다.
-
useQuery, useInfiniteQuery로 만들어져 사용된 인스턴스들은 다른 컴포넌트에서 사용될 때를 대비해 캐시되며, 5분 후에 Garbage Collection (이하 GC)에 의해 사라진다. 기본값은 5분, 5버전부터는 gcTime으로 변경됨.
- refetching이 일어나는 특정조건은 다음과 같다.
새로운 Query Instance가 마운트 될 때 (페이지 이동 후 등의 상황)
브라우저 화면을 다시 focus 할 때
인터넷이 재연결되었을 때
refetchInterval이 설정되어있을 때
Quiz
- A라는 컴포넌트와 B라는 컴포넌트가 한 페이지내에서 사용되고 있다고 하자. 두 컴포넌트는 동일한 쿼리를 사용하고 있다.
- React Query의 default 설정이라면, A에서 쿼리가 변경된다면, B에서 refetch가 일어날까?
Query Refetch?
-
queryKey를 변하게 하므로써, 동적으로 리스트 만들 때 refetch가 가능함. (queryKey가 다르면 다른 쿼리임)
-
useQuery의 반환값인 refetch도 존재하지만, 이는 동일한 쿼리키로 다시 데이터를 update하는 역할임.
refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise
A function to manually refetch the query.
If the query errors, the error will only be logged. If you want an error to be thrown, pass the throwOnError: true option
cancelRefetch?: boolean
Defaults to true
Per default, a currently running request will be cancelled before a new request is made
When set to false, no refetch will be made if there is already a request running.
useInfiniteQuery
- useQuery 와 기본적인 option은 동일, 추가되는 옵션이 존재함. return값도 마찬가지
- https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery 공식문서 참조
ref) 공식문서 : https://tanstack.com/query/latest/docs/framework/react/guides/query-keys#array-keys-with-variables
