[React.js] React Query

React Query

리액트 쿼리란 데이터 fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 리액트 라이브러리이다.

 

React Query 설치하기

npm i react-query

 

React Query 준비하기

모든 컴포넌트를 QueryClientProvider로 감싸준다.

// index.tsx
import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </>,
);

 

React Query 없이 API 호출하는 코드

  const [coins, setCoins] = useState<CoinInterface[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // ()(); 즉시 실행 함수
    (async () => {
      const response = await fetch("https://api.coinpaprika.com/v1/coins");
      const json = await response.json();
      setCoins(json.slice(0, 100));
      setLoading(false);
    })();
  }, []);

---

React Query 사용하기

useQuery(query key, fetcher 함수, [refetch 설정])

 

1. fetcher 함수 만들기

- API를 호출하는 함수들을 따로 파일로 만들어서 관리하는 것이 좋음

// api.ts
const BASE_URL = 'https://api.coinpaprika.com/v1';

export function fetchCoins() {
  return fetch(`${BASE_URL}/coins`).then((response) => response.json());
}

 

2. useQuery 사용하여 로딩과 데이터 처리

import { useQuery } from "react-query";
...
  // useQuery는 isloading이라는 state를 반환 (불리언타입)
  // fetcher 함수로 가져온 데이터는 data에 저장
  const {isLoading, data} = useQuery<CoinInterface[]>("allCoins",fetchCoins)

 

※ Query key

• React Query는 Query key로 캐싱을 관리한다.
• 문자열, 배열, 중첩된 객체 등 다양한 타입이 될 수 있다.
• Query key는 파라미터를 사용하여 다음과 같이 사용할 수 있다.

function Todos({ todoId }) {
   const result = useQuery(['todos', todoId], () => fetchTodoById(todoId))
 }

 

3. useQuery로 refetch 하기

- useQuery의 3번째 인자를 사용함으로써 비동기적으로 데이터를 업데이트할 수 있음

  const { isLoading, data } = useQuery<PriceData>(
    ["tickers", coinId], fetchFunction ,
    {
      refetchInterval: 5000,
      //5초마다 refetch
    }
  );

---