๐ด Introduction
โช ๋ฐ์ดํฐ Fetching, ์บ์ฑ, ๋๊ธฐํ, ์๋ฒ ์ชฝ ๋ฐ์ดํฐ ์ ๋ฐ์ดํธ ๋ฑ์ ์ฝ๊ฒ ๋ง๋ค์ด ์ฃผ๋ React ๋ผ์ด๋ธ๋ฌ๋ฆฌ
๐ Official
๐ก Install
npm i @tanstack/react-query
๐ข Usage
// [ index.tsx ]
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
);
// [ App.tsx ]
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
const App = () => {
return (
<>
<GlobalStyle />
<Router />
<ReactQueryDevtools initialIsOpen={true} />
</>
);
}
export default App;
// [ Usage Component ]
import { useQuery } from "@tanstack/react-query";
import { fetchCoins } from "../api";
const Coins = () => {
// isLoading : ๋ฐ์ดํฐ fetch ์ฌ๋ถ
// data : ๊ฐ์ ธ์จ ๋ฐ์ดํฐ
const { isLoading: infoLoading, data: infoData } = useQuery<InfoData>(
["info", coinId], // key
() => fetchCoinInfo(coinId), // fetcher function
{
refetchInterval: 5000, // refetch interval
}
);
return (
<>
{infoLoading? (
<div>Loading...</div>
) : (
<span>{ infoData }</span>
)}
</>
);
}
๐ต Reference
'React > Library' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[ React ] react-helmet (0) | 2022.07.30 |
---|---|
[ React ] recoil (0) | 2022.07.30 |
[ React ] apexchart (0) | 2022.07.30 |
[ React ] axios (0) | 2022.07.30 |
[ React ] styled-components (0) | 2022.07.18 |