TIL 82. React - Query의 select 옵션

query를 사용하는 가장 큰 이유는 캐싱 때문이다.
select을 사용한다면 데이터를 걸러서 가져오기 때문에 걸러진 데이터만 캐시에 담기게 되고
캐시는 메모리를 사용하기 때문에 select을 사용하게 되면 메모리를 효율적으로 사용할 수 있다고 생각할 수 있지만,
아니다. 캐시 메모리에 담기는 건 전체의 데이터다.
useQuery와 관계없이 발생하는 리렌더링 시, 불필요한 반복문이 실행되지 않도록 해주기만 한다.

아래는 공식 문서의 select 옵션 설명이다.

• select: (data: TData) => unknown
  Optional
  This option can be used to transform or select a part of the data returned by the query function. It affects the returned data value, but does not affect what gets stored in the query cache.

만약 캐시된 데이터의 양을 제어하고자 한다면 queryCache에서 setQueryData 함수를 사용하여 캐시된 데이터를
직접 업데이트하거나, queryCache.invalidateQueries 함수를 사용하여 불필요한 데이터를 제거할 수 있다.

• useQuery 리턴값의 일부분을 select해서 가져올 수 있다.

  const { data } = postDataQuery(
      {
        select: (data) => data[0]
      }
    )

• 가져오는 것뿐만 아니라, reverse 등을 사용하여 변형도 가능하다.

  const { data } = postDataQuery(
      {
  			select: data => data.reverse()
      }
    )