[React] React Query

React Query

React에서 비동기를 쉽게 다루게 해주는 라이브러리

글로벌 상태관리 라이브러리(Redux, MobX 등) 없이 서버에서 데이터를 가져오고

그 데이터를 모든 컴포넌트에서 사용 가능하게 캐싱하거나, 그 이외에도 주기적으로 데이터 패칭,

Optimistic Updates(데이터 변경을 요청 후 실제로 요청이 성공하기 전 미리 UI만 변경한 뒤, 서버의

응답에 따라 다시 롤백하거나 업데이트 된 상태로 UI를 놔두는 것) 등을 지원

기존 요청 방식 VS react-query 요청 방식

• 기존 요청 방식 : isLoading과 data를 state로 가지며 서버 데이터를 불러온 후 상태 update
• react-query : useQuery훅을 이용해 반환받은 isLoading과 data 사용

사용법

우선 사용하고자 하는 컴포넌트를 QueryClientProvider 컴포넌트로 감싸주고 QueryClient 값을 Props로 넣어줘야 한다.

앱 전체에서 사용하고자하면 최상위 컴포넌트에 감싸주면 된다.

import React from 'react';
import './App.css';
import { QueryClientProvider, QueryClient } from 'react-query';

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App"></div>
    </QueryClientProvider>
  );
};

export default App;

useQuery

데이터 가져올 때 사용한다.

const requestData = useQuery(queryKey, queryFn, options)

QueryKey

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

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

• 쿼리가 변수에 의존하는 경우에는 QueryKey 에도 해당 변수를 추가해주어야한다.

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

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

Query Options

옵션 값으로는 다양한 옵션이 지정 가능하다.