[React] React-Query

🎈 리액트 쿼리

데이터 fetch, caching, 값 업데이트, 에러 핸들링 등 비동기 과정을 편리하게 사용할 수 있게 해주는 라이브러리

useEffect로 하던 사이드이펙트 관리 및 fetching을 간단하게 구현 가능

사용 예

- 데이터 update 시 자동 re-fetch
- 데이터 만료 시 다시 get 요청 (invalidateQueries)
- 일정 시간 안에 동일 데이터 여러번 요청 시 한번만 요청 
- 무한 스크롤, 페이지네이션, 검색 등
- isLoading, isFetching, isSuccess, isError 등 상태관리

🎈 세팅

설치
$ npm i react-query

최상위 컴포넌트에서 QueryClient 로 쿼리 인스턴스를 생성하고, QueryClientProvider 로 자식컴포넌트를 감싸준다

/* index.js */

import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient();
// 

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools initialIsOpen={true} />
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

🎈 useQuery

데이터를 조회(get)할 때 사용
useQuery는 기본적으로 비동기로 작동하므로, 한 컴포넌트에 여러개의 useQuery가 있다면 이 useQuery들이 동시에 실행된다.

const { isLoding, isError, data, error } = 
      useQuery( queryKey, queryFn, options )

🔰 반환 값

비동기 함수 실행을 통해 반환된 값

• data : 마지막으로 얻은 response 데이터 객체
• error : 에러 데이터 객체
• isLoading, isSuccess, isError, isFetching, status : 쿼리 상태
  • isFetching : 비동기 쿼리가 완료되지 않은 상태
  • isLoading : isFetching 상태 중, 캐시 데이터도 없는 상태
• refetch :
• remove :

🔰 queryKey

• 여러개 지정 시 배열에 담아서 넣는다
• 키 값을 참고하여 캐싱을 관리한다
  • 동일한 queryKey로 데이터를 추가 요청 하는 경우 값을 재사용
  • 다른 컴포넌트에서도 queryKey를 사용하여 쿼리 호출 가능

const { data: 변수명, error: 변수명, … } = useQuery(
  ['getList', page], 
  () => GET(`url`)
)

page 변경 -> queryKey 변경 -> 재요청

🔰 options

옵션	역할
enabled	쿼리가 실행되는 조건을 지정해주어 비동기를 동기적으로 처리
retry	실패 시 자동 retry
keepPreviousData	새롭게 fetching 시 이전 데이터 유지 여부
refetchInterval	일정시간 간격으로 자동 refetch 조절
refetchOnWindowFocus	창 재포커스 시 자동 refetch 조절
staletime	호출한 데이터의 저장기간 (기본: 0, 값 지정 시 캐싱)
cacheTime	저장한 데이터의 유지기간 (기본: 5분)

🔰 enabled: 동기적으로 실행하기

다른 쿼리 값을 참고하여 실행해야 할 때 enabled 를 사용한다

const { data: data1 } = useQuery(["data1"], getData);
const { data: data2 } = useQuery(["data2", data1], getData, {
  enabled: !!data1,
});

🎈 useQueries

여러 개의 useQuery를 배열로 묶어서 한번에 실행한다.
결과 또한 배열에 담겨 return 된다.

const result = useQueries([
  {
    queryKey: "data1",
    queryFn: getData1,
  },
  {
    queryKey: "data2",
    queryFn: getData2,
  }
]);