react-query

react-query

react-query는 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리이다.

react-query의 상태

• fresh : 새롭게 추가된 쿼리 & 만료되지 않은 쿼리 -> 컴포넌트가 마운트, 업데이트되어도 데이터 재요청 X
• fetching : 요청 중인 쿼리
• stale : 만료된 쿼리 -> 컴포넌트가 마운트, 업데이트되면 데이터 재요청 O
• inactive : 비활성화된 쿼리 -> 특정 시간이 지나면 가비지 컬렉터에 의해 제거

  ---

• staleTime : fresh -> stale 상태로 변경되는 시간 (default 0)
• cacheTime : inactive상태일 때 캐싱된 상태로 남아있는 시간. (default 5min)

react-query 초기 설정

import { QueryClientProvider, QueryClient } from 'react-query';

function App() {
	const queryClient = new QueryClient();
  
  	return (
   		<QueryClientProvider client={queryClient}>
      		<Component {...pageProps} />
        </QueryClientProvider>
    )
};

Next.js기준으로 작성했지만, 최상단에 Provider로 감싸주면된다.
(dehydrate 방식은 추가 필요)

useQuery

GET요청과 같은 데이터를 가져올때 사용되는 훅이다.

export const useGetDataFetch = ({ page }) => {
  const { data } = useQuery(
    ['getData', page],
    async () => {
      const result = await getDataApi({ page });
      return result.data;
    },
    {
      onError: (err) => {
        alert(err)
      }
    })

  return {
    data,
  }
}

위의 코드는 useQuery로 데이터를 받아오는 api를 호출하는 custom hooks이다.
(첫번째 인자는 쿼리 키이고, 쿼리 키가 다르면 호출하는 API가 같더라도 캐싱을 별도로 관리한다.)

++ data 이외에 isSuccess, isLoading, isError 등 여러가지 인자들이 있다. (필요할때마다 찾아보기 !)

useMutation

POST, PUT, DELETE와 같은 변경 및 수정작업을 할때 사용되는 훅이다.

export const usePatchQuantityFetch = () => {
  const { mutate } = useMutation(
    ['patchQuantity'],
    ({ quantity }) => patchQuantityApi({ quantity }),
    {
      onError: (err) => {
        alert(err);
      },
    },
  );

  return {
    mutate,
  };
};

위의 코드는 useMutation으로 수량을 변경하는 api를 호출하는 custom hooks이다.

react-query Options

아래의 여러가지 option들을 hook의 인자로 넘길 수 있다.

• refetchOnMount : 컴포넌트 마운트시 새로운 데이터 패칭 (default true)
• refetchOnWindowFocus : 브라우저 클릭 시 새로운 데이터 패칭 (default true)
• refetchInterval : 지정한 시간 간격만큼 데이터 패칭 (default 0)
• enabled : 컴포넌트가 마운트 되어도 데이터 패칭 (default true, !!id와 같이 준다면 id가 있을때만 데이터 패칭 !)
• onSuccess : 데이터 패칭 성공시 실행할 콜백함수
• onError : 데이터 패칭 실패시 실행할 콜백함수
• select : 데이터 패칭 성공 시 원하는 데이터 형식으로 변환 가능

const { data } = useQuery(['getData'], getDataApi, {
  select: (data) => {
    return data.data.map(item => item.id)
  }
});