리액트쿼리

백엔드 응답에 대한 데이터를 관리해주는 친구

요청을 캐싱 동기화 업데이트

 

왜 쓰냐?

기존방식) useEffect + axios 

1. 로딩,에러 직접 관리

2. 동일 페이지 재방문 시 데이터 매번 새로 요청

3. 캐싱 없음

4. 리패치 타이밍 

 

사용해보자

 

 

1) QueryClient & Provider 설정

// main.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

createRoot(document.getElementById("root")!).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

 

 

1. 백엔드 부담이 줄어든다.

2. 로딩이 빠르다

 

쿼리 키= 데이터의 이름을 지정하는 거라

쿼리키가 지정하면 하나로 날아감

 

쿼리키는 이름을 뭘로 지정할까?
페이지 이름으로 지정하는 게 좋음

 

filter검색

staleTime 몇초가 지나가면 또 호출시키겠다는뜻

 

 

쿼리 키 스테일 타임은 많이 나옴

리패치 ->  폴링 구현

쿼리 인벨리데이트 -> 캐싱 무효화

refetchOnWindowFocus

윈도우 포커스 나갔다 들어오면 리패치 되는거 막는 기능

 

Mutations 생성, 수정할 때 쓴다

post put emfdmf

onSuccess 

 

 

 

무한 스크롤

페이지네이션과 다름