짧은코딩

리페칭을 할 때 중요하게 봐야 되는 것은 서버가 만료 데이터를 업데이트 한다는 것이다. 창을 포커스하는 트리거를 하면 잠시 로딩 인디테이터가 나타나는데 이는 만료되었던 데이터를 가져오기 때문이다. 데이터는 시간이 지나면 자연스럽게 만료된다. stale 쿼리는 어떤 조건 하에서 자동적으로 다시 가져오기가 된다. 새로운 쿼리가 많아지거나 그 쿼리가 처음 호출, 쿼리를 사용하는 컴포넌트 증가, 트리거, 네트워크가 다시 연결되면 리페칭이 일어난다. 그리고 리페칭 간격이 지난 경우에도 리페칭이 다시 일어나는데 이 경우 간격을 둬서 서버를 폴링하고 사용자가 딱히 무엇을 하지 않아도 데이터가 리페칭 된다. 리페칭은 전역 혹은 특정 쿼리로 할 수 있다. refetchOnMount, refetchOnWindowFocus..

useQuery의 select 옵션을 사용하면 쿼리 함수가 반환하는 데이터를 반환할 수 있다. React Query는 불필요한 연산을 줄이기 위해 memoization을 하여 최적화를 한다. 이때 select 함수를 사용하는데 select 함수는 데이터와 함수가 모두 변경되었을 때만 실행되고삼항 연산자로 비교한다. 검색한 데이터와 동일한 데이터고 select 함수에도 변동이 없으면 select 함수는 재실행되지 않는 것이 React Query 최적화이다. 따라서 select 함수는 안정적인 함수일 필요가 있어서 익명 함수는 올 수 없다. 익명 함수를 사용하고 싶다면 useCallback를 사용하면 된다. 사용법 const selectFn = useCallback( (data) => { getAvaila..

프리페칭은 캐시에 아직 데이터가 없는 경우 미리 데이터를 채울 수 있다. prefetchQuery는 queryClient의 메서드이다. 그렇기에 useQuery와 달리 클라이언트 캐시에 추가된다. prefetchQuery는 일회성이다. queryClient를 반환하고 useQuery 클라이언트 hook을 사용한다. 방문할 사이트 예측하는 프리페칭 어떤 사이트에서 홈 화면을 거치고 나서 다른 페이지를 방문할 확률이 높다면 방문할 페이지의 데이터를 미리 프리페칭하는 것이 좋다. 이 예시에서는 홈 화면에 미리 데이터를 프리페칭하는 코드이다. -커스텀 훅 export function useTreatments(): Treatment[] { // fallback을 기본 값으로 둬야 처음에 잠깐 빈 값이 나왔다가 데..

queryClient와 에러 중앙화 기존에는 queryClient를 QueryClientProvider과 같은 파일 내에 선언해 줬다. 하지만 좀 더 큰 규모의 프로젝트에서는 위 사진처럼 queryClient.ts로 따로 빼서 선언해줬다. 이렇게 하면 에러 처리를 중앙화해줄 수 있다. -queryClient.ts // 에러처리 중앙화 function queryErrorHandler(error: unknown): void { // error is type unknown because in js, anything can be an error (e.g. throw(5)) // error이 Error 클래스의 인스턴스인지에 따라 비슷한 방식으로 이름을 정하도록 했다. const title = error inst..

리액트 쿼리에서 무한 스크롤을 구현하려면 useInfiniteQuery를 사용하면 된다. 전체 wrapper 컴포넌트로는 react-infinite-scroller 라이브러리의 InfiniteScroll를 사용하면 된다. -react-infinite-scroller의 npm 사이트 https://www.npmjs.com/package/react-infinite-scroller react-infinite-scroller Infinite scroll component for React in ES6. Latest version: 1.2.6, last published: a year ago. Start using react-infinite-scroller in your project by running `npm..

Mutation mutation은 서버에 데이터를 업데이트하도록 서버에 네트워크 호출을 하는 것이다. 데이터를 추가, 수정, 삭제할 때 사용된다. 그렇기에 mutation을 활용하면 optimistic update를 구현할 수 있고, 쿼리 캐시를 업데이트할 수 있으며 클라이언트에 있는 데이터를 최신 상태로 유지할 수 있다. useMutation useMutation은 useQuery와 비슷하다. 하지만 데이터를 저장하지 않아 key는 필요가 없다. 그리고 isLoading은 있지만 데이터를 저장하지 않으니까 캐시 된 항목이 없어서 isFetching은 없다. 기본값으로 재시도는 하지 않지만 설정할 수 있다. 사용법 블로그 댓글을 삭제하는 예시이다. const deleteMutation = useMutat..

isFetching vs isLoading isFetching은 비동기 쿼리가 해결되지 않았음을 의미한다. 즉, feching을 완료하지 않았다는 의미이다. async 함수가 해결되지 않았고 아직 데이터를 가져오는 중이다. isLoading은 isFetching의 하위 집합이며 데이터를 가져오는 상태라는 것을 의미한다. 쿼리 함수가 해결되지 않았고 캐시 된 데이터가 없다. 표시할 캐시 데이터도 없다는 의미이다. 즉, isLoading 상태이면 isFetching은 참이다. => 별 차이가 없어 보일 수 있지만 페이지네이션을 할 때, 캐시 된 데이터가 있을 때와 없을 때를 구분해야 한다. -예시 if (isFetching) return Loading...; 이 코드에서는 캐시 된 데이터의 존재와 상관없이 ..

prefetching페이지네이션을 하고 다음 페이지로 넘어갈 때, prefetching을 하지 않으면 "로딩중..." 이런 메시지가 보이게 된다. 이는 사용자 경험에 좋지 않다. 그렇기에 prefetching을 해야 한다. prefetching은 데이터를 캐시에 추가하며 구성할 수 있지만 기본값은 stale(만료) 상태이다. 그러고 데이터가 필요할 때 stale 상태에서 데이터를 다시 가져오고 이때 캐시에 있는 만료되지 않은 데이터를 이용한다. 그렇기에 추후에 사용자가 사용할 법한 데이터를 prefetching 하면 좀 더 개선된 사용자 경험을 제공할 수 있다. 페이지네이션에서는 다음 페이지의 데이터를 prefetchig 하면 된다.사용 방법페이지네이션을 예시로 들면 다음 페이지로 넘어가는 버튼을 눌렀을..

리액트 쿼리에서는 key를 다르게 설정해야 다른 값으로 인지한다. 위 사진은 Blog Posts의 글을 클릭하면 각각 다른 comments를 보여주는 사이트이다. 잘못된 코드 const { data, isLoading, isError, error } = useQuery("comments", () => fetchComments(post.id) ); 이 코드에서는 트리거가 발생했을 때만 data를 업데이트한다. 그렇기에 다른 블로그 제목을 클릭해도 같은 댓글이 나오게 된다. 해결 방법 const { data, isLoading, isError, error } = useQuery( ["comments", post.id], () => fetchComments(post.id) ); 이 경우 key를 ["comme..

리액트 쿼리란 클라이언트에서 서버 데이터가 필요할 때, fetch나 axios를 사용하지 않고 리액트 쿼리 캐시를 요청할 수 있다. 즉, 리액트 쿼리는 해당 캐시의 데이터를 유지 관리하는 것이다. 데이터 관리는 리액트 쿼리가 하지만 새 데이터로 캐시를 업데이트하는 시기를 개발자가 설정할 수 있다. 클라이언트 캐시에 있는 데이터가 서버 데이터와 일치하는지 확인하는 방법은 2가지가 있다. 1. 명령형: 쿼리 클라이언트에 기존에 있던 데이터를 무시하고 새 데이터를 서버에서 가져와 교체하는 것 2. 선언형: 예를 들어 브라우저 창을 다시 포커스 하면 refetch하는 트리거 조건을 구성한다. 혹은 시간을 설정하여 그 시간이 지나면 다시 데이터를 불러올 수 있게 할 수 있다. 리액트 쿼리는 서버에 대한 모든 쿼리..