React-Query 알아보기

React-Query

1. React-Query 란?

• 데이터 fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 React 라이브러리.
• Server State를 관리하는 라이브러리로 React 프로젝트에서 Server와 Client 사이 비동기 로직들을 손쉽게 다루게 해주는 도구.

npm i @tanstack/react-query
# or
yarn add @tanstack/react-query

 

TanStack | High Quality Open-Source Software for Web Developers

2. Server State 란?

• Client에서 제어하거나 소유되지 않은 원격의 공간에서 관리되고 유지된다.
• Fetching이나 Updating에 비동기 API가 필요하다.
• 다른 사람들과 공유되는 것으로 사용자가 모르는 사이에 변경될 수 있다.
• 신경쓰지 않는다면 잠재적으로 "out of date"가 될 가능성을 지녔다.

3. QueryClientProvider

• 리액트 쿼리 사용을 위해 QueryClientProvider 를 최상단에서 감싸주어야한다.
• 쿼리 인스턴스를 생성 후 client={queryClient} 작성해준다.

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


const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  )
}

 

4. useQuery 

• React Query를 이용해 서버로부터 데이터를 조회해올 때 사용한다.

import { useQuery } from '@tanstack/react-query';

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

 

5. QueryKey

• QueryKey 를 기반으로 데이터 캐싱을 관리한다.
• 문자열 또는 배열로 지정할 수 있다.
• v5 부터는 배열로만 지정할 수 있다.

// 문자열
useQuery('todos', ...);
// 배열
useQuery(['todos'], ...);

 

6. Query Functions

• useQuery 의 두번째 인자에는 promise 를 반환하는 함수를 넣어주어야 한다.

useQuery('todos', fetchTodos);
useQuery(['todos', todoId], () => fetchTodoById(todoId));
useQuery(['todos', todoId], async () => {
  const data = await fetchTodoById(todoId);
  return data;
});
useQuery(['todos', todoId], ({ queryKey }) => fetchTodoById(queryKey[1]));

 

7. Query Options

• enabled (boolean)
  enabled는 쿼리가 자동으로 실행되지 않게 설정하는 옵션이다.
  아래의 코드는 id가 존재할 때만 쿼리 요청을 한다는 의미의 코드이다.

const { data } = useQuery(
  ['todos', id],
  () => fetchTodoById(id),
  {
    enabled: !!id,
  }
);

• polling 방식
  쿼리가 일정 주기마다 실행되도록 하여 서버와 실시간에 가까운 동기화를 제공한다. 쿼리에 대한 polling을 활성화하려면 pollIntrrval 옵션을 설정해준다.
• refetching 방식
  polling 방식처럼 일정 간격으로 update를 하지 않고 특정 사용자 액션에 대한 응답으로 쿼리 결과를 refetch 해준다.

8. useMutation

• 데이터를 생성/수정/삭제할 때는 useMutation을 사용.

import { useMutation } from '@tanstack/react-query';

const { data, mutate, isError, error } = useMutation(mutationKey, mutationFn, options);

 

9. react-query option setting

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      staleTime: 1000 * 60,
    },
    mutations: {
      retry: 1,
    },
  },
  queryCache: new QueryCache({}),
  mutationCache: new MutationCache({}),
});

• retry
  API가 실패하면 설정한 값만큼 재시도 하는 옵션
  (react-query는 기본적으로 요청이 실패하면 3번의 재시도를 거치기 때문에 retry는 0으로 세팅)
• gcTime (v4는 cacheTime)
  default 3분. 캐싱 유지시간.
  캐시 구조에 저장된 데이터는 메모리상에 존재하게 된다. 이 때, 메모리에 저장되어 있는 캐시 데이터가 언제까지 유지될지를 말해주는 옵션. 언마운트된 후 어느 시점까지 메모리에 데이터를 저장하여 캐싱할 것인지를 결정. 시간이 지나면 가비지 컬렉팅 된다.
• staleTime
  default 0초.
  전달받은 데이터는 리액트 쿼리의 자료구조 내용 중 캐시에 저장이 되는데, 이 때 이 캐시 데이터의 "신선한 상태" 가 언제까지 유지될 지를 말해주는 옵션.
  신선하다 함은, 서버에서 조회한 데이터는 그 때 당시의 데이터 snapshot 이고, 외부 요청으로 서버 데이터가 변경이 되었다면 내 브라우저가 가진 데이터는 이미 오래된 낡은 데이터가 되었으므로 stale 하다고 말하는 것.
  useQuery를 호출할 당시에 옵션으로 staleTime을 따로 지정해주지 않았다면, 항상 캐싱되어 있는 데이터는 stale 하다고 여기기 때문에 refetching 을 하게 되어 서버에 계속적인 요청을 하게 된다.
  inactive -> fetching -> fresh -> stale
  fresh 상태일 때 서버 데이터를 변경해도 화면에는 변화가 없다.
  데이터가 stale 상태가 되면 백그라운드에서 일어나는 isFetching을 제어하여 변경된 데이터가 적용된다.
  그 후 다시 fetching 상태로 가고 fresh 상태로 가게 된다.
  
• refetchOnMount
  default true.
  stale 상태에서 다른 페이지에 갔다가 다시 돌아오면 즉, 마운트될 때 isFetching 값이 ture로 바뀌면서 fetching이 일어난다.(refetch)
  값을 false로 설정하면 마운트 됐을 때 refetch가 일어나지 않는다.
  값을 'always'로 설정하면 staleTime 값과 상관없이 항상 refetch가 일어난다.
• refetchOnWindowFocus
  default true.
  브라우저가 활성화 되었느냐 아니냐에 따라 refetch 방식을 결정.
• refetchInterval
  default false.
  시간을 설정하면 해당 시간마다 강제로 refetch 한다. (Polling)
  ex) 주식 거래 앱
• refetchIntervalInBackground
  default false.
  값을 true로 설정하면 앱이 비활성화 되었더라도 백그라운드에서 fetching 작업이 계속 일어난다.
• queryCache
  전역에서 query cache 핸들링 설정.
• mutationCache
  전역에서 mutation cache 핸들링 설정.
  
• useErrorBoundry
  Fallback UI 설정에 대한 옵션.
• enabled
  default true.
  동기적으로 실행되게 해주는 옵션. false일 경우, 초기 마운트 시에 해당 useQuery가 마치 useEffect 처럼 첫 마운트 시 함수 호출을 하고, 실패했을 때는 계속 retry를 한다.