react query 시작해보기

React Query는 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리

서버에서 가져오는 데이터를 효율적으로 다루기 위한 방법으로 선택한 react query

loading, error에 대한 상태들을 다룰수있다는게 가장 직접적으로 다가오는 편리한점
hook을 사용하여 컴포넌트 내부에서 데이터 사용 가능

기본 설정

queryclient 인스턴스를 생성하여 root 컴포넌트에 감싸주기
react query에 옵션에 대한 설정들임 (추가 옵션들)
아래는 내가 주로 사용하게되던 옵션들의 예시

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false, // 실패 쿼리 재시도
      retryOnMount: false, //쿼리에 오류가 있을 경우 mount시 실행하지않음
      refetchOnWindowFocus: false, // 브라우저에 포커스 될떄마다 호출하지않음
    },
  },
});

function MyApp({ Component, pageProps }) {
  return (
    ...
      <QueryClientProvider client={queryClient}>
        ...
      </QueryClientProvider>
    ...
  );
}

useQuery 사용

기본 사용 방법

const { data , isLoading, error } = useQuery(
  queryKey, 
  fetchFn, 
  options, 
);

queryKey란 useQuery마다 부여되는 고유 key, key의 변화에 따라 query가 재호출
query가 많아지면서 querykey또한 기능 혹은 사용 용도에 따라 다양해지기 때문에 key들을 따로 관리하는것도 좋은 방법!

const queryKey = {
  feature: () => ["feature"],
  feature1: (id) => ["feature1", id],
};

직접적으로 useQuery를 호출하여 사용할 수 있지만, option들이 들어가는 경우도 있고 함수명으로 구분해두면 훨씬 사용하기 편리한듯

const useQueryFeature = () => {
  return useQuery({
    queryKey: queryKey.feature(), // query key
    queryFn: getFeatureApi, // api
    ...options
  });
};

아래의 형태로 사용가능

const { isLoading, isError, data, error } = useQueryFeature();

보통 많이 사용하는 isLoading, isError, data, error 등 이외에 다양한 옵션들과 값 들로 복잡하게 데이터를 불러오는 코드들을 줄일 수 있음

---

이 외에도 여러개의 쿼리를 한꺼번에 관리하는 useQueries, 데이터를 생성, 업데이트 등을 할때 사용하는 useMutation 등등 다양한 훅들이 위와 비슷한 형식으로 사용가능 하니 잘 찾아서 사용해보면 굉장히 편리함

나머지들의 사용법은 차근차근 써보는걸로