[TIL] React-Query

HyeLin·2022년 5월 18일

React-Query

서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 편하게 하는데 사용한다

✔️ 장점

캐싱
get한 데이터가 update하면 자동으로 get을 다시 수행한다. ex) 게시판 글을 가져왔을 때, 글을 쓰게되면 게시판 글을 get하는 api를 자동으로 수행
데이터가 오래됐다고 판단하면 다시 get해준다. invalidateQueries
동일 데이터를 여러번 요청하게 되면 한번만 요청한다.
무한 스크롤
비동기 과정을 선언적으로 관리할 수 있다.
react hook과 구조가 비슷하다.

✔️ 기본 세팅

function App() {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <Users />
      </div>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

queryClient 생성 후 QueryClientProvider에 넣어준다
최상단에서 감싸준다
ReactQueryDevtools는 react-query의 개발 도구

✨ useQuery

데이터를 get하기 위한 api이다. post, update는 useMutation을 사용
Query Key는 다른 컴포넌트에서도 해당 키를 사용하면 호출 가능. Query Key는 string과 배열을 받는다.
return 값은 api의 성공, 실패여부, api return 값을 포함한 객체
useQuery는 비동기로 작동한다. 즉, 한 컴포넌트에 여러개의 useQuery가 있다면 하나가 끝나고 다음에 실행되는 것이 아니라 두개의 useQuery가 동시에 실행된다.
여러개의 비동기 query가 있다면 useQueries 사용 권장
enabled를 사용하면 useQuery를 동기적으로 사용 가능

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

Query가 변수에 의존하면 Query Key에도 해당 변수를 추가해줘야 한다

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

✨ Query Functions 비동기 함수 (API 호출 함수)

promise 를 반환하는 함수를 넣어주어야한다

useQuery('todos', fetchTodos);
useQuery(['todos', todoId], () => fetchTodoById(todoId));

✨ Query Options

1. enabled (boolean)

쿼리가 자동으로 실행되지 않도록 하는 옵션

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

id가 존재할 때만 쿼리 요청하도록

2. refetchOnWindowFocus (boolean | "always")

데이터가 stale 상태일 경우, 윈도우 포커싱 될 때 마다 refetch를 실행하는 옵션
다른 탭으로 갔다가 다시 돌아왔을 때

const { data: userInfo } = useQuery(
  ['user'], getUser,
  {
    refetchOnWindowFocus: true,
    staleTime: 60 * 1000, // 1분
  }
)

fresh 상태인 1분 동안은 다른 탭을 다녀와도 fetch 요청을 하지 않는다

3. retry

실패한 쿼리를 재시도하는 옵션
true로 설정하면 실패 시 무한 재시도, false면 재시도 x

4. staleTime

데이터가 fresh한 상태로 유지되는 시간. 해당 시간이 지나면 stale상태가 됨
fresh 상태에서는 쿼리가 다시 mount되어도 fetch가 실행되지 않는다

5. cacheTime

inactive 상태인 캐시 데이터가 메모리에 남아있는 시간. 이 시간이 지나면 캐시 데이터는 메모리에서 제거된다
default cacheTime은 5분

6. refetchOnMount

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

7. refetchOnReconnect

데이터가 stale 상태일 경우, 재 연결 될 때 refetch 실행하는 옵션
always면 쿼리가 재 연결 될 때 마다 refetch

8. onSuccess

쿼리 성공 시 실행되는 함수
매개변수 data는 성공 시 서버에서 넘어오는 response값이다

9. onError

쿼리 실패 시 실행되는 함수
매개변수로 에러 값을 받을 수 있다

const { data: userInfo } = useQuery(
  ['user'], getUser,
  {
    refetchOnWindowFocus: true,
    staleTime: 60 * 1000, 
    onError: (error) => {
      if (error.response?.data.code === 401) {
        //어쩌구 저쩌구
      }
    },
  }
)