RTK Query
-
[JavaScript] 여러 request 처리하기 with RTK QueryJavaScript 2023. 5. 8. 21:15
한 컴포넌트에 여러 개의 요청을 하는 상황이 있었다. RTK Query를 사용하여 아래와 같이 여러개의 쿼리를 각각의 data와 loading으로 관리하게 되었다. 하지만 코드가 보기에 복잡해보였고 굳이 각각의 쿼리로 관리할 필요 없이 하나의 쿼리로 관리를 하고 싶었다. const { data: firstData, isLoading: isFirstLoading } = useFirstQuery(); const { data: secondData, isLoading: isSecondLoading } = useSecondQuery(); const { data: thirdData, isLoading: isThirdLoading } = useThirdQuery(); RTK Query의 문서를 살펴보니 쿼리를 커스텀..
-
[JavaScript] RTK Query: Automated Re-fetchingJavaScript 2023. 1. 6. 18:43
Automated Re-fetching | Redux Toolkit RTK Query > Usage > Automated Refetching: cache invalidation management redux-toolkit.js.org query 엔드포인트에 구독을 추가하게 되면, 캐시 데이터가 존재하지 않는 경우에만 요청이 전송되고 존재하는 경우 기존의 데이터가 제공된다. RTK Query는 "cache tag" 시스템을 사용하여 mutation 엔드포인트에 영향을 받는 데이터가 있는 query 엔드포인트에 대해 re-fetching을 자동화한다. 각 엔드포인트 + 파라미터의 조합은 'queryCacheKey'를 제공한다. "cache tag"시스템을 사용하면 RTK Query에 특정 쿼리 캐시가 특정 ..