fetching과 에러에 대한 인디케이터 중앙화

데이터 리페칭

auth 통합단계 인증을 진행하기 위해 react-query가 어떤 역할을 하는지?

dependent queries 의존 쿼리

프리페칭, 페이지네이션, 등등

1. React query 설치

npm i react-query@3

2. QueryClient를 다른 파일에서 불러와 app.js에 붙여넣기

// 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 /> 임포트 해온다.

React Dev tools

2. UseTreatment에서 쿼리 불러오기 with CustomHook