React Query

React Query

  

 : 데이터 Fetching, 캐시, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 라이브러리

 

장점

• 기존에 직접 만들어야 했던 기능들을 react-query가 지원하는 별도 옵션들을 통해 짧은 코드로 작성할 수 있다.
• 프로젝트 구조가 기존보다 단순해져 애플리케이션을 유지 보수하기 쉽고, 새로운 기능을 쉽게 구축할 수 있다.
• 별도의 설정 없이 즉시 사용 가능하다.
• 같은 데이터에 대한 여러번의 요청이 있을 시 중복을 제거한다.

 

const { data, isFetching } = useQuery(queryKey, queryFn, { options })

=> useQuery는 파라미터로 queryKey, queryFn, options를 가진다.

 

 

1) queryKey

• 배열 또는 string을 받음
• queryKey가 변경됐을 때 useQuery에서 data를 업데이트
• queryKey로 데이터를 구분하여 다른 컴포넌트에서 useQuery로 동일한 키를 입력하면 데이터를 api 요청없이 사용 가능
• queryKey를 배열로 할 때는 순서를 주의해야 함

 

[key, name, page] !== [key, page, name]
순서가 바뀌면 key가 다르다고 인식되어 새로 api 호출

이럴 때 객체를 이용하면 좋음

[key, {name: name, page: page}] === [key, {page: page, name: name}]
객체 안에서 순서를 다르게 입력해도 같은 key로 인식함

 

 

2) queryFn

: 데이터를 호출하는 함수를 받는다.

 

3) options 

 

onSuccess, onError, onSettled

 

성공,실패,완료되면 실행할 side Effect

 

enabled

 

자동으로 query를 실행시킬지에 대한 여부

• enabled가 false라면 데이터를 불러오지 않음
• 데이터가 undefined일때는 데이터를 반환하지 못하도록 설정하고 싶을 때 사용
• 적용된 상태에서는 useQuery가 return하는 refetch 메소드 등을 이용하여 수동으로 refetch를 해야함

 

retry

 

query 동작 실패 시 자동으로 retry 할지에 대한 여부

 

select

 

성공시 가져온 data를 가공 후 전달

 

keepPreviousData

 

데이터가 새롭게 refetch될 때 이전 데이터 유지할 것인지에 대한 여부

 

false 

• page가 바뀔 때 data가 비워진 후 새로운 data를 받아옴.
• pagination 구현 시 keepPreviousData가 false일 경우 page가 바뀔 때마다 useQuery는 새로운 query라고 생각하여 isSuccess와 isLoading 값이 queryKey가 바뀔 때마다 변함

 

true

• 새로운 data를 다 받아온 후 data를 교체
• pagination을 구현 시 keepPreviousData가 true일 경우 첫 페이지에서만 isSuccess와 isLoading 값이 변하고(처음 데이터를 불러오기 시작할 때, 불러온 후) 페이지 이동할 때 더 이상 isSuccess와 isLoading은 변하지 않음)
• 위와 같은 이유로 pagination을 구현할 때는 true로 하는게 좋음

 

refetchInterval

 

주기적으로 refetch 할지에 대해 결정하는 옵션

 

cacheTime

 

캐시된 데이터가 GC에 의해 메모리 상에서 지워지기 전까지 얼마나 긴 시간동안 들고 있어야 하는지에 대한 설정 가능

 

staleTime

 

useQuery,useInfiniteQuery로 조회하는 데이터들은 특정 시간이 지나면 stale data로 간주됨. staleTime을 이용하면 설정한 시간이 지나기 전까지는 데이터를 다시 호출하지 않음.

 

refetchOnMount

 

true일 경우 mount 시점에 data가 stale이라고 판단되면 모두 refetch(모두 default true)

 

refetchOnwindowFocus

 

true일 경우 windowFocus 시점에 data가 stale이라고 판단되면 모두 refetch(모두 default true)

 

refetchOnReconnect

 

true일 경우 Reconnect 시점에 data가 stale이라고 판단되면 모두 refetch(모두 default true)

 

 

useQuery return

 

data

 

queryFn을 호출하여 얻은 결과 또는 queryKey에 따른 cache data를 반환

 

isSuccess

 

queryFn이 호출되었을 때 false를 반환하고, queryFn가 정상적으로 완료되었을 때 true를 반환

 

isLoading

 

cache data가 없고 queryFn을 통한 fetch가 진행 중일 때 true를 반환하고, fetch가 끝나면 false를 반환

 

isFetching

 

cache data를 불러올 때, queryFn을 호출할 때 항상 true를 반환. loading 상태를 나타내고 싶을 때 주로 사용

 

---

Mutations

: 데이터 생성/수정/삭제

 

mutate

 

mutation 실행

 

mutateAsync

 

mutate와 비슷. But Promise 반환

 

reset

 

mutatiom 내부 상태를 clean

 

onMutate

 

본격적인 mutation 동작 전에 먼저 동작하는 함수(Optimistic Update 적용 시 유용함)

---

Query Invalidation

queryClient.invalidateQueries("todos")

: update 후 get 함수 재실행