fetching과 에러에 대한 인디케이터 중앙화
데이터 리페칭
auth 통합단계 인증을 진행하기 위해 react-query가 어떤 역할을 하는지?
dependent queries 의존 쿼리
프리페칭, 페이지네이션, 등등
npm i react-query@3
// queryClient.ts
import { QueryClient } from 'react-query';
export const queryClient = new QueryClient();
// App.tsx
import { ChakraProvider } from '@chakra-ui/react';
import { ReactElement } from 'react';
import { QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';
import { queryClient } from '../../react-query/queryClient';
import { theme } from '../../theme';
import { Loading } from './Loading';
import { Navbar } from './Navbar';
import { Routes } from './Routes';
export function App(): ReactElement {
return (
<ChakraProvider theme={theme}>
<QueryClientProvider client={queryClient}>
<Navbar />
<Loading />
<Routes />
<ReactQueryDevtools />
</QueryClientProvider>
</ChakraProvider>
);
}
ChakraProvider
내부에 QueryClientProvider
를 위치 시키는 이유 : react-query에서 오류가 낫을때, ChakraProvider에서 toast메세지를 띄워줘야 하기 때문이다.
추가로 <ReactQueryDevtools />
임포트 해온다.