[RQ(13)]데이터 프리페칭(Pre-fetching)

이전 강의에서 pagination 사용자 경험이 그리 좋지 않았음.

• 다음 페이지 버튼을 클릭할 때마다 페이지가 로딩되는 순간이 있음
  • 왜냐하면 캐시에 페이지가 없어서

이번 강의에서,
데이터를 미리 캐시에 넣어서 사용자가 기다리지 않도록 하겠음 !

Prefetching

prefetch

• 캐시에 데이터를 더하는 것
• 자동적으로 데이터는 stale로 간주 (설정도 가능)
• refetch 하면 캐시에서 데이터를 가져온다
  • 물론 캐시안 데이터가 만료되지 않아야함
• prefetching은 예상되는 데이터 필요에 의해 사용됨
  • 꼭 페이지네이션에만 사용되는 것이 아님 !

문법

prefetchQuery는 QueryClient의 method다.
전에 이렇게 생성한 QueryClient가 기억나는가!!!?

이런식으로 useQueryClient라는 훅을 써서 그 쿼리 클라이언트를 가져오자

이 훅은 함수형 컴포넌트에서 실행한다.

언제 실행해야 할까?

• 다음 페이지 버튼의 클릭 이벤트에서 실행하는건 좋지 않음.

왜냐하면,
상태 업데이트는 비동기적이라 이 업데이트가 이미 적용되었는지 정확히 알 수 없다.
즉, 현재 페이지가 무엇인지 확실히 알 수 없음.

대신, 우린 현재 페이지가 변경될 때마다 useEffect를 사용할 것

currentPage가 바뀔 때마다 prefetchQuery 함수 실행

그리고 다음 페이지를 미리 가져온다.

prefetchQuery 인수는 useQuery 인수와 매우 유사하다.
useQuery를 사용하기 위해 쿼리 키가 필요하듯이,
여기에도 작성해준다. 근데, useQuery에 사용한 것과 같은 형태이어야 함.

• 왜냐하면, react-query가 캐시에 이미 data가 있는지 확인할 때 여기로 찾으니까 !

우리가 아는 데이터 범위를 넘어서 데이터를 가져오지 않도록 제한을 둔다.

결과)
다음 페이지를 클릭하면, 로딩 표시 없이 데이터가 바로 보인다.

사용자는 5페이지에 있지만,
prefetch로 6페이지를 미리 가져왔다.

사용자는 데이터를 보기 위해 기다릴 필요가 없어짐 !!!!