[React] React query 적용하기!!!

index.tsx

이거 추가하기

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

const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}>
</QueryClientProvider>

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ThemeProvider } from 'styled-components';
import { theme } from './theme';
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}>
    <ThemeProvider theme={theme}>
    <App />
    </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>
);

 

api.ts만들어서 이거추가.

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

 

Coins.tsx

const { isLoading, data } = useQuery("allCoins", fetchCoins)

useQuery는 2가지 argument를 필요로 하는데
첫번째는 querykey : query의 고유식별자다.(allCoins라고 지음.)
두번째는 fetcher함수이다. 난 이미 fetchCoins 라고 만들어둠.
fetchCoins가 끝나면 react query는 그 함수의 데이터를 여기 data에 넣어준다.

 

fetcher함수가 loading중이라면 react query는 isLoading에서 그걸 알려줄거다.
useQuery는 fetcher 함수를 부르고 fetcher함수가 끝나면 json을 data에 넣을거다

 

data가 그전에는 coins였고 그것의 interface가 CoinInterface였으니까 

const { isLoading, data } = useQuery<CoinInterface[]>("allCoins", fetchCoins)

이렇게 해주면된다.

 

---

그전과 차이가 있다면!!

뒤로가기로 돌아왔을때 로딩이 보이지 않는다!
react query가 데이터를 캐시에 저장해두기 때문이다.

그래서 react query는 api에 접근하지 않는다.
이게 react query를 사용하느냐 안하느냐의 아주 큰 차이다

 

---

Devtools라는게 있다
render할수 있는 component이고, 
react query에 있는 devtools를 import해오면 너의 캐시에 있는 query를 볼수 있다.

app.tsx

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

<ReactQueryDevtools initialIsOpen={true} />