🔥 필터
337자
4분
TanStack Query에서는 일부 메서드가 QueryFilters 또는 MutationFilters 객체를 받아들입니다. 이 필터들을 사용하면 쿼리나 뮤테이션을 세밀하게 제어할 수 있습니다.
쿼리 필터
쿼리 필터는 특정 조건을 가진 객체로, 이를 통해 원하는 쿼리를 찾을 수 있습니다. 다음과 같은 예제를 살펴보겠습니다:
typescript
// 모든 쿼리 취소
await queryClient.cancelQueries()
// 키가 'posts'로 시작하는 비활성 쿼리 모두 제거
queryClient.removeQueries({ queryKey: ['posts'], type: 'inactive' })
// 활성 상태인 모든 쿼리 다시 가져오기
await queryClient.refetchQueries({ type: 'active' })
// 키가 'posts'로 시작하는 활성 쿼리 모두 다시 가져오기
await queryClient.refetchQueries({ queryKey: ['posts'], type: 'active' })
typescript
// 모든 쿼리 취소
await queryClient.cancelQueries()
// 키가 'posts'로 시작하는 비활성 쿼리 모두 제거
queryClient.removeQueries({ queryKey: ['posts'], type: 'inactive' })
// 활성 상태인 모든 쿼리 다시 가져오기
await queryClient.refetchQueries({ type: 'active' })
// 키가 'posts'로 시작하는 활성 쿼리 모두 다시 가져오기
await queryClient.refetchQueries({ queryKey: ['posts'], type: 'active' })
쿼리 필터 객체는 다음과 같은 속성을 지원합니다:
queryKey?: QueryKey: 일치시킬 쿼리 키를 정의합니다.exact?: boolean: true로 설정하면 정확히 일치하는 쿼리 키만 반환합니다.type?: 'active' | 'inactive' | 'all': 기본값은 'all'입니다. 'active'는 활성 쿼리, 'inactive'는 비활성 쿼리와 일치시킵니다.stale?: boolean: true면 오래된 쿼리, false면 최신 쿼리와 일치시킵니다.fetchStatus?: FetchStatus: 'fetching'은 현재 가져오는 중인 쿼리, 'paused'는 일시 중지된 쿼리, 'idle'은 가져오지 않는 쿼리와 일치시킵니다.predicate?: (query: Query) => boolean: 최종 필터 함수로, 모든 일치하는 쿼리에 적용됩니다.
뮤테이션 필터
뮤테이션 필터는 특정 조건을 가진 객체로, 이를 통해 원하는 뮤테이션을 찾을 수 있습니다. 다음과 같은 예제를 살펴보겠습니다:
typescript
// 현재 실행 중인 모든 뮤테이션 수 가져오기
await queryClient.isMutating()
// 뮤테이션 키로 필터링
await queryClient.isMutating({ mutationKey: ['post'] })
// 조건 함수로 뮤테이션 필터링
await queryClient.isMutating({
predicate: (mutation) => mutation.options.variables?.id === 1,
})
typescript
// 현재 실행 중인 모든 뮤테이션 수 가져오기
await queryClient.isMutating()
// 뮤테이션 키로 필터링
await queryClient.isMutating({ mutationKey: ['post'] })
// 조건 함수로 뮤테이션 필터링
await queryClient.isMutating({
predicate: (mutation) => mutation.options.variables?.id === 1,
})
뮤테이션 필터 객체는 다음과 같은 속성을 지원합니다:
mutationKey?: MutationKey: 일치시킬 뮤테이션 키를 정의합니다.exact?: boolean: true로 설정하면 정확히 일치하는 뮤테이션 키만 반환합니다.status?: MutationStatus: 뮤테이션의 상태에 따라 필터링합니다.predicate?: (mutation: Mutation) => boolean: 최종 필터 함수로, 모든 일치하는 뮤테이션에 적용됩니다.
유틸리티 함수
matchQuery
typescript
const isMatching = matchQuery(filters, query)
typescript
const isMatching = matchQuery(filters, query)
이 함수는 주어진 쿼리 필터와 쿼리가 일치하는지 여부를 불리언 값으로 반환합니다.
matchMutation
typescript
const isMatching = matchMutation(filters, mutation)
typescript
const isMatching = matchMutation(filters, mutation)
이 함수는 주어진 뮤테이션 필터와 뮤테이션이 일치하는지 여부를 불리언 값으로 반환합니다.
이러한 필터와 유틸리티 함수들을 활용하면 TanStack Query에서 쿼리와 뮤테이션을 더욱 정교하게 관리할 수 있습니다. 개발자는 이를 통해 애플리케이션의 데이터 흐름을 효과적으로 제어하고 최적화할 수 있습니다.
YouTube 영상
