리엑트 쿼리 : useQuery 데이터의 캐시 키와 Promise 를 반환하는 함수를 기반으로 데이터의 로딩 결과 오류 상태를 관리해 준다.
Promise 를 반환하는 함수의 매개변수를 캐시키에 포함시킨다.
stale time 과 cache time
stale time : 신선하지 않다는 의미 → 데이터가 더이상 유효하지 않다 → 재요청 , 기본값은 0 인데 불러온 시점부터 유효하지 않게 되어서 재요청이 필요한 상태가 된다. 재용청 기회가 주어지는 시점은 똑같은 캐시 키를 사용하는 useQuery 를 사용하는 컴포넌트가 마운트될 때이다.
useQuery Hook을 사용하는 컴포넌트가 언마운트되고 나서 해당 데이터를 얼마 동안 유지할지에 대한 설정. 기본값은 5분이다. 그래서 만약에 컴포넌트가 언마운트 되고 5분이 안되서 다시 마운트 되었다면 isLoading이 true가 되지 않고 이전에 data 값을 사용하게 된다. 그리고 staelTime 에 따라 해당 데이터가 유효하다면 재요청 하지 않고 유효하지 않다면 재요청 한다.
기본 옵션의 경우 useQuery를 사용하는 어떤 컴포넌트가 마운트 되고, 처음 마운트된 컴포넌트가 5분이 되지 않은 상태에서 다른 컴포넌트에서 사용한다면 일단 data를 이전 데이터에서 가져다가 쓰고, 유효하지 않기 때문에 재요청을 실시해서 대체한다. 만약 5분이 지났다면 data 가 undefined 이고 새로 요청을 실시한다.
axios 인스턴스를 사용하는 이유?
baseURL을 설정하기 위해서
공통 헤더를 인스턴에 넣어서 요청할 수 있다.
react-query를 프로젝트에서 사용할 때에는 QueryClientProvider를 최상단에서 감싸줘야 한다. 캐시를 관리할때 사용하는 QueryClient 인스턴스를 자식 컴포넌트에서 사용할수 있게 해주기 때문이다.
데이터를 생성,수정, 삭제 할때는 useMutation 이라는 hook 을 사용한다. → useMutation 은 특정 함수에서 우리가 원하는 때에 직접 요청을 시작하는 형태로 작동한다.
refetch 를 이용하는 방법은 구현하기 쉽지만 모든 페이지에 대해서 재용청 하는 문제가 있다. → useInfiniteQuery 는 반대 방향으로도 페이지네이션 할 수 있는데 그때 사용하는 getPreviousPageParam 을 옵션 설정하여 구현 최적화할 수 있다.