React Query는 React 어플리케이션에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화 하고 업데이트 하는 작업을 도와 주는 라이브러리 입니다.
장점
* 캐싱
* Boilerplate 코드의 감소
* get 한 데이터에 update 가 발생하면 자동으로 get을 다시 수행한다.
* 동일 데이터 여러번 요청시 한번만 요청한다 (옵션에 따라 중복호출 허용 시간 조절 가능)
* 데이터가 오래되었다고 판단하면 다시 get (invalidateQueries)
* API 요청 수행을 위한 규격화된 방식 제공
사용
세팅
useQuery
- 데이터를 get 하기 위한 api / post,update에는 useMutation을 사용
- 첫번째 파라미터로 unique Key가 들어가고, 두번째 파라미터로 비동기 함수(api 호출함수)가 들어갑니다.
- unique Key는 다른 컴포넌트에서도 해당 키를 사용하면 호출이 가능합니다.
unique Key는 string 과 배열을 받는데 배열로 넘기면 0번 값은 string 값으로 다른 컴포넌트에서 부를 값이 들어가고 두번째 값을 넣으면 query 함수 내부에 파라미터로 해당 값이 전달됩니다.
- return 값은 api의 성공,실패 여부. 즉 api return값을 포함한 객체입니다.
- useQuery는 비동기로 작동합니다. 여러개의 비동기 query가 있다면 useQueries를 권장
- enabled를 사용하면 useQuery를 동기적으로 사용가능
예제
* status 로 isLoding, isSucess를 한번에 처리 할 수도 있다.
useQuery의 동기적 실행
enabled 옵션을 사용하면 useQuery를 동기적으로 사용 가능합니다.
useQuery의 3번째 인자로는 옵션값이 들어가는데 enabled값을 true일때 useQuery를 실행합니다. 이를 이용하면 동기적으로 함수를 실행 할 수 있습니다.
useQueries
useQuery를 비동기로 여러개 실행할 경우 어려움을 겪을수 있습니다. 이를 방지하기 위해 promise.all처럼 useQuery를 하나로 묶을수 있는 기능이 useQueries 입니다. promise.all처럼 하나의 배열에 각 쿼리에 대한 상태 값이 객체로 들어옵니다.
useMutation
값을 바꿀때 사용하는 api입니다. return 값은 useQuery와 동일하다.
update후에 get 실행
mutation 함수가 성공 할때, unique Key 로 맵핑된 get 함수로 invalidateQueries 에 넣어주면 됩니다.
mutation에서 return된 값을 이용해서 get 함수의 파라미터를 변경해야 될 경우에는 setQueryData를 사용합니다.
react Suspense 와 Error boundary 같이 사용하기
Suspense 사용하여 loading을 Error boundary를 사용하여 에러 핸들링을 더욱 직관적으로 할 수 있습니다.
suspense를 사용하기 위해 QueryClient에 옵션을 하나 추가합니다.
함수에 suspense를 사용하는 예시
Reference
https://kyounghwan01.github.io/blog/React/react-query/basic/#react-suspense%E1%84%8B%E1%85%AA-react-query-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5
https://tech.kakaopay.com/post/react-query-1/