이번 한이음 프로젝트에서 react query를 사용하기 때문에 한번 공부해보곘당

🖥 React Query

리액트에서 비동기 로직을 리액트스럽게 다룰 수 있게 해주는 라이브러리.
server state를 효율적으로 관리 할 수 있다.

💡 Stale

리액트 쿼리는 기본적으로 캐시된 데이터를 stale한 상태로 여긴다.

stale은 최신화가 필요한 데이터라는 의미로
stale 상태가 되면

• 새로운 query 인스턴스가 마운트될 때
• 브라우저 화면을 이탈했다가 다시 포커스할 때
• 네트워크가 다시 연결될 때
• 특별히 설정한 refetch interval에 의해서 (refetchinterval)
  📌 이번 프로젝트에서 polling 구현할 떄 refetchinterval로 polling 시간을 정해줬다.

위의 경우 일때 refetch 된다.

query에 별다른 action이 없으면 inactive 상태로 캐시에 남아있다가 5분 뒤에 메모리에서 사라진다

💡 사용법

기본 세팅

App.js

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

const queryClient = new QueryClient();

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

useQuery

기본 형태

import { useQuery } from "react-query";
// 주로 사용되는 3가지 return 값 (data, isLoaing, error)
const { data, isLoading, error } = useQuery(queryKey, queryFn, options)

QueryKey

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

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

📌 쿼리가 변수에 의존하면 경우 쿼리키에도 해당 변수를 추가해주어야한다.

const { data, isLoading, error } = useQuery(['todos', id], () => axios.get(`http://.../${id}`));

Query Function

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]));

우리 프로젝트에서는 대부분 세번째 방식으로 이용한다.

Query Options

이번 프로젝트에서 refetch 관련 option들을 많이 사용하기 떄문에 관련 option들을 정리해 보겠다.

staleTime, cacheTime

staleTime은 데이터가 stale 상태가 되지 않도록 fresh하게 유자하는 시간을 설정하는 option이다.
cacheTime은 데이터가 캐싱되어 유지되는 시간을 설정해주는 option이다.

📌 staleTIme의 기본값은 0이고, cacheTime은 5분이다. 따라서 아무 option을 주지 않으면 캐싱이 되지 않는다.

refetchOnMount (boolean | "always")

refetchOnMount는 데이터가 stale 상태일 경우 마운트 시 마다 refetch를 실행하는 옵션이다.
always로 설정하면 마운트 시마다 매번 refetch를 실행한다.

refetchOnWindowFocus (boolean | "always")

refetchOnWindowFocus는 데이터가 stale 상태일 경우 윈도우 포커싱 될때 마다 refetch를 실행하는 옵션이다.
always 로 설정하면 항상 윈도우 포커싱 될 때 마다 refetch를 실행한다는 의미이다.
📌 다른 탭을 눌렀다가 다시 원래의 탭을 눌러도 refetch가 실행되고, 개발자 도구 창을 켜서 페이지 내부를 다시 클릭했을 때도 refetch 된다.

refetchOnReconnect (boolean | "always")

refetchOnReconnect는 데이터가 stale 상태일 경우 재 연결 될 때 refetch를 실행하는 옵션이다.

refetchInterval

데이터를 지정한 시간에 따라 refetch를 시켜주는 옵션

refetchIntervalInBackground

true로 설정하면 background에 있어도 refetchInterval에 의해 refetch된다.

더많은 option들은 여기에서