React Query

provide를 이용하여 client를 props로 넘겨준다

src/index.tsx

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

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={lightTheme}>
        <App />
      </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

src/api.ts

export function coinFetch() {
	return fetch(`https://api.coinpaprika.com/v1/coins`).then(res => res.json())
}

다음으로 fetcher 함수를 만들어준다. fetcher 함수는 fetch promise를 return해야한다.

src/api.ts

export function coinFetch() {
	fetch(`https://api.coinpaprika.com/v1/coins`)
      .then(res => res.json())
}

useQuery를 이용하여 다양한 데이터를 받아서 이용한다.
useQuery의 첫번째 파라미터는 Unique key를 입력하고, 두번째 파라미터에 fetch함수를 넣어준다.

src/routes/coins.tsx

import { useQuery } from "react-query";
import { coinFetch } from "../api";

export interface ICoin {
  id: string;
  name: string;
  symbol: string;
  rank: number;
  is_new: boolean;
  is_active: boolean;
  type: string;
}

export default function Coins() {
  ...
const { isLoading, data } = useQuery<ICoin[]>('allCoins', coinFetch)
  ...

만약 여러개의 useQuery를 이용하여 사용할때
useQuery의 첫번째 파라미터는 고유의 키값이 필요하므로
해당 키값의 중복을 방지하기 위해
"allCoins"를 ["info", coinId] 처럼 바꿔 사용한다.

두번째 파라미터 함수에 인자 값이 필요하다면
() => coinFetch(id) 형태로 바꾸어 넣는다.
coinFetch(id)로 작성하면 함수가 전달되지 않고
즉시 실행이 되기 때문에 함수를 넘겨주기 위해
다음과 같이 형태를 바꿔주는 것.

React Query Devtools

react-query/devtools 패키지가 있어서 활용 가능하다.
해당 도구는 모든 내부의 동작을 시각화 하는데 도움을 주며 캐시에 있는 query를 볼수 있다

src/App.tsx

import { ReactQueryDevtools } from "react-query/devtools";

...

function App() {
  return (
    <>
      <GlobalStyle />
      <Router />
      <ReactQueryDevtools initialIsOpen={false} />
    </>
  );
}

ReactQuery에 3번째 파라미터를 선택적으로 설정 가능한데
refetchInterval을 이용하여 ms로 설정하여 원하는 시간마다 새로고침이 가능하다

  ...
const { isLoading, data } = useQuery<ICoin[]>('allCoins', coinFetch, {
  refetchInterval: 5000 //5초
  
})
  ...