[TanStack Query / React Query] TanStack Query 필터링 filters : QueryFilters와 MutationFilters

https://tanstack.com/query/latest/docs/framework/react/guides/filters#query-filters

TanStack | High Quality Open-Source Software for Web Developers

 

공식문서를 간단히 요약한 내용입니다.

 

기본적으로 필터들은 invalidateQueries, removeQueries, refetchQueries 등과 함께 쓰입니다.

 

 

1. QueryFilters (쿼리 필터)

 

주 속성들:

 

• queryKey: 매칭할 쿼리 키 지정
• exact: 정확한 쿼리 키 매칭 여부 (true/false)
  exact: false(기본값)일 때는 쿼리 키가 지정된 배열로 "시작하는" 모든 쿼리를 포함합니다.
  
  useQuery({ queryKey: ['test'] })
  useQuery({ queryKey: [' test ', 'text'] })
  useQuery({ queryKey: [' test ', 1] })
  useQuery({ queryKey: [' test ', { userId: 1 }] })
  
  exact: true 일 때는 
  
  queryClient.invalidateQueries({
    queryKey: [' test '],
    exact: true
  })
  queryKey: [' test '] 만 해당 됩니다.
• type: 'active' | 'inactive' | 'all'
  Active Query (활성 쿼리) 
  
  현재 렌더링된 컴포넌트에서 useQuery 또는 관련 훅으로 사용/구독 중인 쿼리
  화면에 보이는(mounted) 컴포넌트에서 사용되는 쿼리
  
  
  Inactive Query (비활성 쿼리)
  
  더 이상 화면에 보이지 않는(unmounted) 컴포넌트의 쿼리
  현재 어떤 컴포넌트에서도 사용되지 않는 쿼리
• stale: 오래된(stale) 또는 신선한(fresh) 쿼리 필터링
• fetchStatus: 'fetching' | 'paused' | 'idle' 상태 필터링
• predicate: 커스텀 필터 함수
  
  

queryClient.invalidateQueries({
  predicate: (query) => 
    // 특정 날짜 이후의 데이터만 무효화
    query.queryKey[0] === 'todos' && 
    query.queryKey[1]?.date > someDate
})

 

 

 

2. MutationFilters (뮤테이션 필터)

 

주 속성들:

• mutationKey: 매칭할 뮤테이션 키
• exact: 정확한 매칭 여부
• status: 뮤테이션 상태 기준 필터링
• predicate: 커스텀 필터 함수

// post 관련 뮤테이션 필터링
await queryClient.isMutating({ 
  mutationKey: ['post'] 
})

// ID가 1인 뮤테이션만 필터링
await queryClient.isMutating({
  predicate: (mutation) => 
    mutation.options.variables?.id === 1
})