TIL : React Query

React Query

( 참고자료 : 공식문서 )

: serverState를 관리하기 위한 라이브러리

serverState?

서버에 요청하고 도착하기까지의 상태
=(isLoading, error, data)

API통신으로 서버에 요청을 보낸 후부터 관리해야하는 serverState를 ReactQuery에서 제공하는 hook인 useQuery(리액트쿼리 훅)안에서 자동으로 컨트롤 할 수 있으며, hook 안에서 자동으로 return 해주는데, 우리는 자동으로 return해주는 이 서버스테이트들을 자유롭게 이용할 수 있다.

우리는 이전까지는 서버스테이트 관리를 thunk로 해왔다.

react query는 thunk의 역할과 동일하다. 하지만 차이점은
thunk는 pending, fulfilled, rejected의 상태를 따로 나누어서 해주는 반면에,
query는 useQuery가 자동으로 관리해주기때문에 서버스테이트를 편하게 관리할 수 있다는 점이다. (코드 가독성 차원에서도 좋음)

react query의 장점 중 하나가 캐싱기능이다.

캐싱기능?

: 서버 요청을 보냈을 때 쿼리 key를 보냄 ⇒ 쿼리 key를 먼저 검색을 함 ⇒ 캐시메모리에 해당 키가 있는지 확인
해당 query 키 O ⇒ fecher 함수를 실행하지 않고 캐시메모리에 있는 데이터를 그대로 이용할 수 있게끔 한다.
해당 query 키 X ⇒ fetcher함수를 실행을 해서 받아온 결과를 쿼리 key에 대응하는 data를 value에 저장을 한다.

⇩⇩⇩⇩⇩

API 요청시 querykey가 API 요청결과를 캐시에 저장하고,
캐싱된 API 요청은 다시 서버에 요청하지않고 일단 쿼리 key에 접근하여 데이터를 찾아 넘겨줌 ⇒ 빠르게 불러올 수 있다.

useQuery

: react-query가 제공하는 hook으로, querykey와 fetcher함수를 인자로 받는다.

fetcher 함수가 실행됐을 때, 쿼리키가 매개변수로 자동으로 넘어가게 된다. ( 따로지정 X )

const fetcher = () =>
     fetch('https://api.~~~').then(res =>
       res.json());

const { isLoading, error, data } = useQuery('repoData', fetcher)

설치하기

yarn add react-query

사용하기

! 쿼리키는 배열로 나타낸다.

await queryClient.refetchQueries(['posts'], { active: true })

⇒ ‘posts’라는 쿼리키를 가지고 있으면 refecth를 시켜라.

queryClient : 최상위에 쿼리 클라이언트가 있기 때문에 안에 있는 모든 컴포넌트 내에서 저장되어 있는 캐시에 접근할 수 있는 총 관리자. 모든 캐시메모리에 직접 접근 가능하다.