useQuery

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

useQuery
useQuery에는 queryKey가 들어가는데 일종에 useEffect에 있는 depency array 같이 작동한다.
쿼리는 server state를 요청하는 프로미스를 리턴하는 함수와 함께 unique key로 맵핑된다.
쿼리는 콜백 함수의 요청이 프로미스를 리턴한다면 일단 잘 작동한다.
하지만 서버의 데이터를 바꿀 수 있는 요청이라면 mutation 쓰는 게 더 추천된다.
데이터를 get 하기 위한 API이다.
첫 번째 파라미터로 unique Key가 들어가고, 두 번째 파라미터로 비동기 함수(API 호출 함수)가 들어간다. (당연한 말이지만 두 번째 파라미터는 promise가 들어가야 한다.)
첫 번째 파라미터로 설정한 unique Key는 다른 컴포넌트에서도 해당 키를 사용하면 호출 가능하다.
unique Key는 string과 배열을 받는다.
배열로 넘기면 0번 값은 string값으로 다른 컴포넌트에서 부를 값이 들어가고 두 번째 값을 넣으면 query 함수 내부에 파라미터로 해당 값이 전달된다.
return 값은 api의 성공, 실패 여부, api return 값을 포함한 객체이다.
useQuery는 비동기로 작동한다.
즉, 한 컴포넌트에 여러 개의 useQuery가 있다면 하나가 끝나고 다음 useQuery가 실행되는 것이 아닌 두 개의 useQuery가 동시에 실행된다.
여러 개의 비동기 query가 있다면 useQuery보다는 useQueries를 권유한다.