[React] React-Query 란?(컨셉)

리액트 쿼리 프리뷰

목적 : 클라이언트 상태 + 가져온 서버데이터 상태 관리를 잘 하자.
(리트라이,리프레쉬,refetch,caching,invalid cache, optimistic-mutation .. etc)

React-Query가 주장하는 Global State 개념

• Global State라는 말을 쓰지 말자 : 전역 state는 Client와 Server로 분류할 수 있고, 이 두 state는 다른 방식으로 다뤄져야 효율적인 앱을 만들 수 있다.
• Server-State : 서버에서 가져오는 데이터들도 하나의 상태

Server-State과 Client-State의 구분

• Client State : 세션간 지속적이지 않는 데이터, 동기적, 클라이언트가 소유, 항상 최신 데이터로 업데이트(렌더링에 반영)

• ex) 리액트 컴포넌트의 state, 동기적으로 저장되는 redux store의 데이터

• Server State : 세션간 지속되는 데이터, 비동기적, 세션을 진행하는 클라이언트만 소유하는게 아니고 공유되는 데이터도 존재하며 여러 클라이언트에 의해 수정될 수 있음, 클라이언트에서는 서버 데이터의 스냅샷만을 사용하기 때문에 클라이언트에서 보이는 서버 데이터는 항상 최신임을 보장할 수 없음.

• ex) 리액트 앱에서는 비동기 요청으로 받아올 수 있는, 백엔드 DB에 저장되어있는 데이터

Query들의 4가지 상태

1. fresh : 새롭게 추가된 쿼리 인스턴스 → active 상태의 시작
2. fetching : 요청을 수행하는 중인 쿼리
3. stale : 인스턴스가 존재하지만 이미 패칭이 완료된 쿼리. 특정 쿼리가 stale된 상태에서 같은 쿼리를 useQuery로 또 호출해 마운트를 시도한다면 캐싱된 데이터가 반환.
4. inactive : active 인스턴스가 하나도 없는 쿼리. 5분 간격으로 아예 gc된다.

Query들의 refetching 되는 경우

1. 런타임(렌더링)간 특정 쿼리 인스턴스가 다시 만들어졌을 때(해당 쿼리가 이미 stale일 경우 캐싱)
2. window가 다시 포커스가 되었을때
3. 네트워크가 다시 연결되었을 때
4. refetch interval이 있을때 : 요청 실패한 쿼리는 디폴트로 3번 더 백그라운드단에서 요청하며, retry, retryDelay 옵션으로 간격과 횟수를 커스텀 가능하다.

ref

ref

추가 컨셉

prefetching

• 목적 : 사용자가 마우스를 올리면, 미리 연결되는 데이터를 가져와준비

Pagination

• cursor위치변화에 따라, key값 invalid 하기

InfiniteScroll fetch

• 목적 : 무한 스크롤에서, 기존값 유지 + key값 invalid

optimistic-updates

• 목적 : todolist에서 아이템을 추가했다. 당장 View에서는 추가된것처럼 보이게 하자.
  뒷단에서는 서버로 새로운 데이터를 요청하고, 성공시 그대로 유지 but, 실패시 View에서 todo 제거

https://github.com/tannerlinsley/react-query/blob/master/examples/optimistic-updates-typescript/pages/index.tsx