React Query의 select 함수

useQuery의 select 옵션을 사용하면 쿼리 함수가 반환하는 데이터를 반환할 수 있다. React Query는 불필요한 연산을 줄이기 위해 memoization을 하여 최적화를 한다. 이때 select 함수를 사용하는데 select 함수는 데이터와 함수가 모두 변경되었을 때만 실행되고삼항 연산자로 비교한다. 검색한 데이터와 동일한 데이터고 select 함수에도 변동이 없으면 select 함수는 재실행되지 않는 것이 React Query 최적화이다. 따라서 select 함수는 안정적인 함수일 필요가 있어서 익명 함수는 올 수 없다. 익명 함수를 사용하고 싶다면 useCallback를 사용하면 된다.

사용법

  const selectFn = useCallback(
    (data) => {
      getAvailableAppointments(data, user);
    },
    [user],
  );

최적화를 위해 useCallback을 사용하여 select 함수를 먼저 만들어줬다.

  const { data: appointments = fallback } = useQuery(
    [queryKeys.appointments, monthYear.year, monthYear.month],
    () => getAppointments(monthYear.year, monthYear.month),
    {
      select: showAll ? undefined : selectFn,
    },
  );

select 함수를 showAll이 false일 때만 실행시키고 싶어서 true일 때는 undefinded가 실행되게 했고 false일 때 미리 만든 select 함수가 실행되도록 했다.