React Query 공부 (9) Select option을 이용한 data transform

상황

서버에서 받아온 데이터를 그대로 사용하는 경우도 있지만, 클라이언트 내에서 정한 기준으로 재가공한 데이터를 사용하고 싶을 때가 있다.
예를 들어 사용자가 선택한 filter 값에 의해 가공된 데이터를 캐시하고자 하는 상황이다.

구현 목표

서버에서 받아온 데이터를 useQuery 내의 option인 select를 이용하여, 사용자가 정한 filter 값으로 재가공하여 캐시로 fetch한다.

구현 코드

• select는 데이터가 변함과 동시에 함수도 변해야 실행이 된다.
• select funtion은 안정적인 결과를 반환하는 함수여야 하므로, 고정된 일을 보장해주는 useCallback을 사용한다.
  => dependency array의 filter값이 바뀔 때마다 데이터를 새롭게 가공하는 함수를 실행시켜준다.
• select함수에 따로 매개변수로 data를 추가하지 않아도, 가공되지 않은 data가 곧바로 들어간다.

const [filter, setFilter] = useState('all')

const selectFn = useCallback((data) => filterFn(data, filter), [filter])

// filter가 all일 때는 가공하지 않는다는 조건을 붙인다.
const { data } = useQuery(queryKey, queryFn, { select: filter === 'all' ? undefined : selectFn })