React Query
https://youtu.be/n-ddI9Lt7Xs?si=h-HGi7XTRU2qcM8I
기존상태 관리 라이브러리는 비동기 및 서버 상태 관리에 적합하지 않습니다.
서버상태란?
클라이언트에서 제어하지않거나 소유하지 않은 위치에서 관리됩니다.
feching 및 updating을 위해 비동기 API 가 필요합니다.
소유권이 공유되므로 사용자가 모르는 사이에 다른 사용자가 변경할 수 있습니다.
주의하지 않으면 애플리케이션에서 "out of date" 상태가 될 수 있습니다.
서버상태에서 생기는 문제
캐싱
같은 데이터 요청 중복 제거
언제 "out of date" 되는지 알아내기
out of date된 데이터 백그라운드에서 업데이트
최대한 빠르게 업데이트 반영하기
pagination,lazy loading 등 성능 최적화
서버 상태의 메모리, garbage collection 관리
structurl sharing으로 쿼리 결과 memoizing
etc...
React Query는 서버 상태를 관리하기 위한 가장 좋은 라이브러리중 하나입니다.
리액트 쿼리와 캐싱
HTTP 캐싱에도 사용됩니다.
React Query에 사용되는 캐싱 메커니즘
- 캐싱된 데이터를 사용자에서 제공하면서, 비동기적으로 콘텐츠를 서버에서 revalidate
QueryClient
모든 쿼리에 대한 상태 및 캐시를 가지고 있는 클래스.
React Query를 사용하기 위해서는 필수적으로 생성해줘야합니다.
Queries 옵션
enabled: 자동으로 query를 실행할지에 대한 여부
retry: query동작 실패 시, 자동으로 몇번만큰 retry를 시도할 지 결정하는 옵션
select: resphone 값에서 필요한 값만을 추출할 수 있도록 하는 옵션
refetchlnterval: 주기적으로 refetch 하는 간격을 설정하는 옵션
throwOnError: errorboundary로 에러를 전파할 지 결정하는 옵션
data: 마지막으로 resolved된 데이터
error: 에러가 발생했을 때 반환하는 에러 객체
isLoading: 최초 fetch가 in-flight 상태일 때 true 값을 반환
isFetching: fetch가 실행될 때마다 true값을 반환
Mutatuions
서버의 데이터를 수정할 때 사용
Mutatuions 옵션
onMutate: mutate함수가 실행되기전에 사용되는 함수
mutate: mutation함수를 실행시키는 함수
useSuspenseQuery
React의 Suspense for Data Fetching API을 사용하기 위한 hook
Suspense for Data Fetching API란 데이터를 불러오는 동안 fallback UI를 대신 보여주는 기능
ReactQuery는 어떻게 데이터를 저장하고 있을까?
ReactQuery는 데이터를 저장하고 있는데 전역적으로 사용할 수 있는것처럼 보입니다.
바로 context를 사용하기 때문입니다.
contextAPI를 사용하기 때문에 useClientProvider하위에 써놓은 Query들을 서로 공유해서 사용할 수 있습니다.
컴포넌트에서 usequery가 실행되면 생성된 Query인스턴스와 함께 key값으로 mapping시킵니다.
그리고 fetch된 데이터를 query 객체 내부에 저장함으로써 캐시를 관리하게 되는겁니다.
context를 사용했기 때문에 저장된 캐시 값은 다른 컴포넌트에서 사용할 수 있습니다.