React Query

React-query

• 데이터 fetching, caching, synchronizing and updating server state을 도와주는 도구
• *주영님이 데이터 fetching 예외처리를 예로 들면서 말씀하셨던 기능들 대부분이 가능한 듯? (캐싱, 실패시 재요청, 몇 초마다 재요청 등)
• 핵심이 되는 개념: query, mutation, query invalidation
• 아주 간단히 설명하면 query가 데이터 받아오는 것. mutation은 post, delete 같은 서버 리소스를 변경하는 작업. Query invalidation은 (주로) mutation을 수행하고 난 뒤에 관련 query가 더 이상 유효하지 않다(서버가 가진 데이터하고 다르다)고 알려주는 것. (예를 들어 글을 올리고 나면 전체 글 리스트를 invalidate 하는 식. 그러면 그 쿼리는 다시 fetch됨)
• 기본적(기본 세팅에 의하면)으로는 쿼리의 새 인스턴스마다 새로운 데이터를 불러옴 => 캐시된 데이터를 stale하다고 보기 때문 (staleTime 옵션을 주면 매번 서버 요청을 하지 않고 캐시에 있는 데이터를 사용하는 것도 가능함)
• query는 몇 가지 상태 존재 => isLoading, isError, isSuccess, isIdle(?) => 다 마치고나면 inactive (이건 react-query가 자체적으로 관리하는 상태인듯?)
• inactive한 상태로 5분이 지난 쿼리는 garbage collect
• 이외에도 background fetching 같은 것들도 가능한 듯
• 기본적인 사용법
• 각 컴포넌트에서는 useQueryClient해서 사용: 예시 (https://react-query.tanstack.com/examples/basic)
• Custom Hook으로 만들어서 사용하기 편함 : 예시 (https://react-query.tanstack.com/examples/custom-hooks)
• devTools 있음