React 프로젝트에서 Server와 Client 사이 비동기 로직들을 손쉽게 다루게 해주는 도구
- 전역 상태관리 라이브러리가 아니고 서버와 클라이언트 간의 비동기 작업을 쉽게 해주는 라이브러리
공식 문서: https://react-query.tanstack.com/
참고 영상: https://www.youtube.com/watch?v=MArE6Hy371c
React Query는
- fetching
- cashing
- synchronzing (동기화)
- updating server state
하는 작업을 간단하게 만든다
React Query의 3가지 핵심 개념
1. Queries
2. Mutations
3. Query Invalidation
Query Key
- React Query는 Query Key에 따라 query caching을 관리
String 형태
// Queries
const query = useQuery('todos', getTodos) // queryKey === ['todos']Array 형태
// Array
useQuery(['todo',5],...) // querykey === ['todo', 5]
useQuery(['todo', 5, {preview: true}], ...) // queryKey === ['todo', 5, {preview: true}]
useQuery(['todo', {type: 'done'}]...) // queryKey === ['todo', {type: 'done'}]
- 정재남 님의 댓글
관련 내용
https://github.com/tannerlinsley/react-query/releases/tag/v4.0.0-alpha.1
useQuery가 반환 하는 것들
- data : 마지막으로 성공한 resolved된 데이터 (response)
- error : 에러가 발생했을 때 반환되는 객체
- isFetching : Request가 in-flight중일 때 true
- status, isLoading, isSuccess, isLoading .. // query 상태
- refetch : 해당 query refetch하는 함수 제공
- remove : 해당 query cache에서 지우는 함수 제공
3번 째 인자인 option에 들어갈 것들
-
onSuccess, onError, onSettled : query fetching 성공/실패/완료 시 실행할 Side Effect정의
-
enabled: 자동으로 query를 실행시킬지 말지 여부
-
retry : query 동작 실패 시, 자동으로 retry할지 결정하는 option
-
select: 성공 시 가져온 data를 가공해서 전달
-
keepPreviousData: 새롭게 fetching 시 이전 데이터 유지 여부
-
refetchInterval: 주기적으로 refetch할 지 결정하는 option
Queries 파일 분리도 추천된다
- useQuery를 컴포넌트에 직접 쓰면 관리가 어려울 수가 있다.
컴포넌트에 선언한 것을 가져와서 사용하면 편리 // 도메인별로 묶어서 관리
query가 여러 개일 때
function App(){
const usersQuery = useQuery('users', fetchUsers)
const teamsQuery = useQuery('teams', fetchTeams)
const projectsQuery = useQuery('projects', fetchProjects)
...Mutations
- 데이터 updating시 사용
const mutation = useMutation(newTodo => {
return axios.post('/todos', newTodo)
})useMutation
- 반환 값
const {
data,
error,
isError,
isIdle,
isLoading,
isPaused,
isSuccess,
mutate,
mutateAsync,
reset,
status,
} = useMutation(mutationFn, {- mutate: mutation 함수
- mutateAsync : mutate와 비슷 // But Promise 반환
- reset : mutation 내부 상태 clean
-option
} = useMutation(mutationFn, {
mutationKey,
onError,
onMutate,
onSettled,
onSuccess,
retry,
retryDelay,
useErrorBoundary,
meta,
})- onMutate: 본격적인 Mutation 동작 전에 먼저 동작하는 함수, Optimistic update 적용할 때 유용
Query Invalidation
- 내부에 캐시들을 clean 시킨다
Caching 하고 Synchronization
stale while revalidate
백그라운드에서 stale response를 revalidate 하는 동안 캐시가 가진 stale response를 반환
cacheTime: 메모리에 얼마만큼 있을건지 (해당시간 이후 GC에 의해 처리, default 5분)
staleTime: 얼마의 시간이 흐른 후에 데이터를 stale 취급할 것인지 (default 0)
Query 상태 흐름
- 화면에 있다가 사라지는 query
- A 쿼리 인스턴스가 mount
- 네트워크에서 데이터 fetch 하고 A라는 query key로 캐싱
- 데이터는
fresh상태에서staleTime(deafult = 0)이후stale상태로 변경 - A쿼리 인스턴스가 unmount됨
- 캐시는
cacheTime(default = 5min)만큼 유지되다가 가비지 콜렉터로 수집됨
staleTime
- 데이터가
fresh->stale상태일 때 캐싱된 상태로 남아있는 시간 - 쿼리 인스턴스가 unmount되면 데이터는
inactive상태로 변경되며, 캐시는cacheTime만큼 유지된다. cacheTime이 지나면 가비지 콜렉터로 수집된다.cacheTime이 지나기 전에 쿼리 인스턴스가 다시 마운트 되면, 데이터를 fetch하는 동안 캐시 데이터를 보여줌
QueryClient 내부적으로 Context 사용
FE