useQuery에 대해서 간단한 정도만 사용했는데 여러 옵션들이 많았고 최근에 사용한 옵션에 대해서 기록을 해야 겠다고 생각했다.
tanstack-query에서 제공하는 useQuery의 옵션은 공식 문서에서 아래처럼 나와있다.

const {
  data,
  dataUpdatedAt,
  error,
  errorUpdatedAt,
  failureCount,
  failureReason,
  fetchStatus,
  isError,
  isFetched,
  isFetchedAfterMount,
  isFetching,
  isInitialLoading,
  isLoading,
  isLoadingError,
  isPaused,
  isPending,
  isPlaceholderData,
  isRefetchError,
  isRefetching,
  isStale,
  isSuccess,
  refetch,
  status,
} = useQuery({
  queryKey,
  queryFn,
  gcTime,
  enabled,
  networkMode,
  initialData,
  initialDataUpdatedAt,
  meta,
  notifyOnChangeProps,
  placeholderData,
  queryKeyHashFn,
  refetchInterval,
  refetchIntervalInBackground,
  refetchOnMount,
  refetchOnReconnect,
  refetchOnWindowFocus,
  retry,
  retryOnMount,
  retryDelay,
  select,
  staleTime,
  structuralSharing,
  throwOnError,
})

굉장히 많은 옵션들이 있었고, 이 옵션에 대해서 전부 공부를 한 것은 아니지만 그 중에서 쓸만한 것, 그리고 내가 실제로 사용한 것을 뽑아보자면

• queryKey
• queryFn
• enabled
• retry
• refetchInterval
• select
• staleTime

위 처럼 7개 정도가 있는 것 같다.

queryKey

queryKey: unknown[]

쿼리 키는 useQuery에 필수 옵션으로 쿼리들을 구분하기 위해서 query key가 필요하고 이 키가 변경이 될 때, 자동적으로 업데이트를 한다.

queryFn

queryFn: (content: QueryFunctionContext) => Promise<TData>

queryKey와 마찬가지로 필수 옵션으로 기본 쿼리 함수가 정의되지 않은 경우에만 필요하다고 하는데 사실 무조건 필요하다고 봐도 무방할 것 같다. 여기에 들어가는 함수는 에러도 알아서 캐치를 해준다고 하는데 Promise.reject를 통해서 확실하게 에러를 잡을 수 있다.

enabled

enabled : boolean

enabled는 기본적으로 true이며 이때, query는 자동적으로 실행된다. false로 할 경우 수동적으로 query를 실행하며 refecth라는 함수를 통해서 query를 실행할 수 있게 된다. refecth함수는 useQuery의 반환값 객체에 있다.

retry

retry : boolean | number | (failureCount: number, error: TError) => boolean

retry는 queryFn이 실패할 경우에 retry를 할건지 말건지에 대해서 설정을 할 수 있다.
retry가 false이면 실패해도 다시 한번 요청을 하지 않고, true이면 무한대로 요청을 한다. number가 설정이 된다면 그 만큼 retry를 실시하고, 기본적으로 3으로 설정이 돼있다.
함수도 넣을 수 있는데 함수의 반환 값이 false라면 더 이상 요청을 하지 않고 true를 반환한다면 다시 retry를 한다.

refetchInterval

refetchInterval: number | false | ((query: Query) => number | false | undefined)

얼마나 Interval을 가지고 다시 query를 실시할 것인지에 대해서 설정할 수 있으며, number로 넣으면 millisecond로 주기를 정할 수 있으며 함수가 들어온다면 계산해서 주기를 설정할 수 있다.

select

select: (data: TData) => unknown

query를 통해서 제공되는 data를 어떻게 변환시킬 건지를 정할 수 있다.

staleTime

staleTime: number | Infinity

이 데이터가 어느 시간까지 stale하게 유지할 것인가에 대해서 설정할 수 있으며 0일 경우에는 항상 stale한 상태이고 기본적으로 0이다. Infinity로 설정할 경우 항상 Fresh한 값으로 유지하겠다라는 것을 의미한다.