React-Query

why Query?
React 애플리케이션에서 서버 state를 fetching, caching, synchronizing, updating할 수 있도록 도와주는 라이브러리
쉽게말해서,
fetcher함수를 만들 수 있게 해줘서 대박임
강력한 Cashing 매커니즘을 가지고 있어서 대박임

설치

react 버전 18 이전:npm i react-query
react 버전 18 이상: npm i @tanstack/react-query
react-query를 쉽게 관리하기 위한 Devtools npm i -D @tanstack/react-query-devtools

사용해볼까요~!

1. index.tsx

<QueryClientProvider><QueryClientProvider/>로 전체를 감싸준다

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

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
        <RouterProvider router={router} />     
    </QueryClientProvider>
  </React.StrictMode>
);

2.fetcher 함수 만들기

fetch를 하는 함수를 작성할 파일을 하나 만든다 ex) api.ts
fetcher 함수는 꼭 fetch promise를 return해주어야한다

//api.ts
import axios from 'axios';

export const fetchCoins = async () => {
  return await axios
    .get('https://api.coinpaprika.com/v1/coins')
    .then((res) => res.data);
};

3.useQuery로 데이터 받기

이전에 state값으로 받아오던 데이터와 로딩을 useQuery() 훅으로 전부 대채할 수 있다

react-query 이전코드

import { useQuery } from 'react-query';
import { fetchCoins } from './api'; //fetcher함수 들고오기

function Coins() {
  const { isLoading, data } = useQuery<CoinInterface[]>(
    ['allCoins'],
    fetchCoins
  );
  return (
  );
}

🔥 @tanstack/react-query에서 useQuery를 사용할때 query key의 값은 대괄호로 묶어줘야한다

devtools

최상단 render페이지에 ReactQueryDevtools를 import한다

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

function App() {
  return (
    <>
      <GlobalStyle />
      <Outlet />
      <ReactQueryDevtools initialIsOpen={true} />
    </>
  );
}

만약에 URL에 변수가 포함되어 있으면 어떻게 해야할까?

처음에는 useParams를 한번 더 사용해서 변수에 넣어주는 방법을 생각했다
하지만, 훅을 통해 받아오는 것 보다 매개변수로 데이터를 받아오는 방법이 있었다

변수 coinId를 매개변수로 받아와서 사용한다

//api.ts
export const fetchCoinInfo = async (coinId: string | undefined) => {
  return await axios(`${BASE_URL}/coins/${coinId}`).then((res) => res.data);
};

그럼 매개변수는 어떻게 전달했을까?
fetcher함수 데이터만 전달->const {}=useQuery(["키값"],fetcher함수)
fetcher함수 데이터, 매개변수 전달->const {}=useQuery(["키값",매개변수],()=>fetcher함수(매개변수))

function Coin() {
  const { coinId } = useParams();

  const { isLoading: infoLoading, data: infoData } = useQuery<IInfoData>(
    ['info', coinId],
    () => fetchCoinInfo(coinId)
  );
  const { isLoading: tickersLoading, data: tickersData } = useQuery<IPriceData>(
    ['tickers', coinId],
    () => fetchCoinTickers(coinId)
  );

fetchInterval

useQuery hook의 3번째 argument이다(옵션선택)
실시간으로 api를 fetch해서 데이터가 실시간으로 업데이트되게 만들 수 있다

const {}=useQuery(["키값"],fetcher함수,{refetchInterval:milliseconds})

아래는 해당 query를 5초마다 refetch할 수 있도록 설정

  const { isLoading: tickersLoading, data: tickersData } = useQuery<IPriceData>(
    ['tickers', coinId],
    () => fetchCoinTickers(coinId),
    {
      refetchInterval: 5000,
    }
  );